How to use nouislider - 10 common examples

this.engine3d.setStepsize(sliderValue);
      });

      this.sliderQuality.noUiSlider.on('start', () => {
        this.engine3d.onMouseDown();
      });

      this.sliderQuality.noUiSlider.on('end', () => {
        this.engine3d.onMouseUp();
      });
    }

    // slider 3d x cut
    this.sliderBrightness3d = $('#med3web-slider-3d-brightness').get(0);
    if (this.sliderBrightness3d) {
      noUiSlider.create(this.sliderBrightness3d, {
        start: 1,
        tooltips: true,
        step: 0.01,
        range: {
          min: 0,
          max: 1,
        },
      });
      this.sliderBrightness3d.noUiSlider.on('slide', (sliderValue) => {
        // use 'sliderValue' as a float value [0; 1]
        this.engine3d.updateBrightness(sliderValue);
      });

      this.sliderBrightness3d.noUiSlider.on('start', () => {
        this.engine3d.onMouseDown();
      });

// use 'sliderValue' as a float value [0; 1]
        this.engine3d.setOpacityBarrier(sliderValue);
      });

      this.sliderOpacity.noUiSlider.on('start', () => {
        this.engine3d.onMouseDown();
      });

      this.sliderOpacity.noUiSlider.on('end', () => {
        this.engine3d.onMouseUp();
      });
    }
    // slider quality
    this.sliderQuality = $('#med3web-slider-3d-quality').get(0);
    if (this.sliderQuality) {
      noUiSlider.create(this.sliderQuality, {
        start: 400,
        step: 10,
        range: {
          min: 100,
          max: 1000,
        },
      });
      this.sliderQuality.noUiSlider.on('slide', (sliderValue) => {
        this.engine3d.setStepsize(sliderValue);
      });

      this.sliderQuality.noUiSlider.on('start', () => {
        this.engine3d.onMouseDown();
      });

      this.sliderQuality.noUiSlider.on('end', () => {

`<label for="${i}" class="noUi-slider-label">${strings[i]}</label>`
        ).appendTo(slider)

        const formatttip = {
          to: function(value) {
            if (value &lt; 1) {
              return value
            }
            if (value &gt;= 10000) {
              return `${Math.round(value / 1000)}k`
            }
            return Math.round(value)
          },
        }

        noUiSlider.create(slider, {
          start: [v[0], v[1]], // 4 handles, starting at...
          connect: true, // Display a colored bar between the handles
          behaviour: "tap-drag", // Move handle on tap, bar is draggable
          step: v[2],
          tooltips: [formatttip, formatttip],
          range: { min: v[0], max: v[1] },
        })

        let resizeTimer
        // update filter settings when user changes slider
        slider.noUiSlider.on("update", function() {
          const filtID = this.target.id
          clearTimeout(resizeTimer)
          resizeTimer = setTimeout(function() {
            slider = document.getElementById(filtID)
            const data = slider.noUiSlider.get()

format: wNumb({
          decimals: 0,
          suffix: ' vx',
        }),
      });

      this.slider3dEraserRadius.noUiSlider.on('slide', (sliderValue) => {
        // be careful - sliderValue is string, smth like "10 vx"
        this.engine3d.setEraserRadius(parseInt(sliderValue, 10));
      });
    }

    // slider 3d eraser depth
    this.slider3dEraserDepth = $('#med3web-slider-depth').get(0);
    if (this.slider3dEraserDepth) {
      noUiSlider.create(this.slider3dEraserDepth, {
        start: 20,
        tooltips: true,
        step: 1,
        range: {
          min: 1,
          max: 50,
        },
        format: wNumb({
          decimals: 0,
          suffix: ' vx',
        }),
      });
      this.slider3dEraserDepth.noUiSlider.on('slide', (sliderValue) => {
        // be careful - sliderValue is string, smth like "10 vx"
        this.engine3d.setEraserDepth(parseInt(sliderValue, 10));
      });

createSlider() {
      noUiSlider.create(this.$refs.slider, {
        start: this.value,
        connect: this.connect,
        range: this.range,
        ...this.options
      });
      const slider = this.$refs.slider.noUiSlider;
      slider.on("slide", () => {
        let value = slider.get();
        if (value !== this.value) {
          this.$emit("input", value);
        }
      });
    }
  },

createSlider() {
        var slider = (this.slider = noUiSlider.create(this.sliderContainer, { ...this.props }));

        var uuid = this.props.uuid;
        var socket = this.props.socket;

        slider.on('update', function(data) {
            socket.emit(uuid + '#update', msgpack.encode(data));
        });
        slider.on('change', function(data) {
            socket.emit(uuid + '#change', msgpack.encode(data));
        });
        slider.on('slide', function(data) {
            socket.emit(uuid + '#slide', msgpack.encode(data));
        });
        slider.on('set', function(data) {
            socket.emit(uuid + '#set', msgpack.encode(data));
        });

},
      from: function(value) {
        return value;
      }
    },

    pips: {
      mode: 'positions',
      values: [0, 50, 100],
      density: 10,
      stepped: true
    }
  });

  numSticksRange = document.getElementById('num-sticks-select');
  noUiSlider.create(numSticksRange, {
    range: {
      'min': 15,
      'max': 21
    },
    start: 17,
    step: 1,
    tooltips: true,
    format: {
      from: function(value) {
        return parseInt(value);
      },
      to: function(value) {
        return parseInt(value);
      }
    },

setTimeout(() => {
      if (!range) {
        return;
      }

      const { rangeSlider, minAmount, maxAmount, min, max } = this.state;
      const toolTipFormatter = {
        to: (value) => {
          return value;
        }
      };

      if(!rangeSlider) {
        noUiSlider.create(range, {
          start: [ minAmount, maxAmount ],
          range: {
            "min": [ parseInt(min) ],
            "max": [ parseInt(max) ]
          },
          step: 1,
          connect: true,
          tooltips: [ true, toolTipFormatter ]
        });
        this.setState({ rangeSlider: range });

        range.noUiSlider.on("set", (values, handle) => {
          const value = parseInt(values[handle]);
          if (handle) {
            this.props.onChangeSlider(value, "max");
            this.setState({ maxAmount: value });

start: [defaults.roomSize],
    range: {
      min: 0,
      max: 1
    },
    step: 0.05,
    tooltips: true,
  });

  roomSizeSlider.noUiSlider.on('update', ([value]) => {
    onRoomSizeUpdate(Number(value));
  });

  const dampeningSlider = document.getElementById('dampening');

  noUiSlider.create(dampeningSlider, {
    start: [defaults.dampening],
    range: {
      min: 100,
      max: 5000
    },
    step: 100,
    tooltips: true,
    format: {to: Math.ceil, from:  Math.ceil}
  });

  dampeningSlider.noUiSlider.on('update', ([value]) => {
    onDampeningUpdate(Number(value));
  });

  const wetSlider = document.getElementById('wet');

function createSliders() {
  const radius = document.getElementById('slider-radius');
  radius.setAttribute('type', 'range');
  radius.setAttribute('min', 0);
  radius.setAttribute('max', 300);
  radius.value = options.radius;
  radius.classList.add('sliderHorizontal');

  radius.oninput = e => {
    const label = document.getElementById('slider-radius-val');
    options.radius = +e.target.value;
    label.textContent = updateRadiusText();
    drawing.updatePosition();
  };

  const magnitude = createSlider(document.getElementById('slider-magnitude'), {
    step: 0.1,
    start: [options.rangeStart, options.rangeEnd],
    connect: true,
    range: {
      min: options.rangeStart,
      max: options.rangeEnd
    }
  });

  magnitude.on('update', values => {
    const label = document.getElementById('slider-magnitude-val');
    options.rangeStart = values[0];
    options.rangeEnd = values[1];
    label.textContent = updateMagnitudeText();

    if (drawing) drawing.updatePosition();