M & M JS Range

Mort&Mortis presents JS Range
Get started

About M&M JSR

M&M JS Range (M&M JSR) provides You with excellent solution for creating so-called range-inputs.

Range input is form's field where one can choose a value from min-max range. Although HTML 5 comes with input[type="range"] its functionality lacks a lot of features. M&M JSR gives You anything You may need. For more information see README

Demo

These demos represents usage of different JSR functions and settings. See README for more details.

Feel free to play with sliders, and try to find bugs :-) If you find any, let me know.

Basic usage, multiple sliders, labels


new JSR({
  modules: [
    new ModuleRail(),
    new ModuleSlider(),
    new ModuleBar(),
    new ModuleLabel(),
  ],
  config: {
    min: 0,
    max: 100,
    step: 1,
    initialValues: [25, 75],
    container,
  }
});

Limit


new JSR({
  modules: [
    new ModuleLimit({
      min: 25,
      max: 75
    }),
    new ModuleRail(),
    new ModuleSlider(),
    new ModuleLabel(),
  ],
  config: {
    min: 0,
    max: 100,
    step: 1,
    initialValues: [35, 65],
    container,
  }
});

Single value, formatter, grid


new JSR({
  modules: [
    new ModuleRail(),
    new ModuleSlider(),
    new ModuleLabel({ formatter: v => `${v}°C` }),
    new ModuleGrid({ formatter: v => `${v}°C`, color: '#999' }),
  ],
  config: {
    min: 0,
    max: 100,
    step: 1,
    initialValues: [50],
    container,
  }
});

Only offset slider and grid


new JSR({
  modules: [
    new ModuleSlider(),
    new ModuleGrid({ color: '#999' }),
  ],
  config: {
    min: 0,
    max: 100,
    step: 1,
    initialValues: [50],
    container,
  }
});
      
.jsr.is-demo-4 .jsr_slider {
  top: calc(5px / 2 + 17px);
}

Only rail and bar + labels


new JSR({
  modules: [
    new ModuleRail(),
    new ModuleBar(),
    new ModuleLabel(),
  ],
  config: {
    min: 0,
    max: 100,
    step: 1,
    initialValues: [30, 70],
    container
  }
});

Colorful bars


new JSR({
  modules: [
    new ModuleSlider(),
    new ModuleRail(),
    new ModuleBar(),
    new ModuleLabel(),
  ],
  config: {
    min: 0,
    max: 100,
    step: 1,
    initialValues: [15, 30, 45, 60],
    container
  }
});
      
.jsr.is-demo-6 .jsr_bar[data-key="0"] {
  background: linear-gradient(90deg, rgba(106,97,255,1) 0%, rgba(0,212,255,1) 100%);
}

.jsr.is-demo-6 .jsr_bar[data-key="1"] {
  background: linear-gradient(90deg, rgba(0,212,255,1) 0%, rgba(215,0,255,1) 100%);
}

.jsr.is-demo-6 .jsr_bar[data-key="2"] {
  background: linear-gradient(90deg, rgba(215,0,255,1) 0%, rgba(72,255,0,1) 100%);
}

.jsr.is-demo-6 .jsr_slider[data-key="0"]::before {
  background: rgba(106,97,255,1);
  box-shadow: 0 0 8px rgba(106,97,255,1);
}

.jsr.is-demo-6 .jsr_slider[data-key="1"]::before {
  background: rgba(0,212,255,1);
  box-shadow: 0 0 8px rgba(0,212,255,1);
}

.jsr.is-demo-6 .jsr_slider[data-key="2"]::before {
  background: rgba(215,0,255,1);
  box-shadow: 0 0 8px rgba(215,0,255,1);
}

.jsr.is-demo-6 .jsr_slider[data-key="3"]::before {
  background: rgba(72,255,0,1);
  box-shadow: 0 0 8px rgba(72,255,0,1);
}
^