noUiSlider v13.1.5

Notice

Due to the fact that React noUiSlider v2.0.1 was not well maintained, we've dropped the usage of this component, and replaced it with the noUiSlider v12.0.0 component.

Please refer to noUiSlider documentation for more information.

Styles

You will find the styles for this component in
assets/scss/material-dashboard-pro-react/plugins/_plugin-nouislider.scss.

Example

If you want to add color to your slider you need to add on the div a className="slider-$color", where $color can be one of primary, info, success, warning, danger.

import React from "react";
// plugin that creates slider
import Slider from "nouislider";

export default function Sliders(){
  React.useEffect(() => {
    if (
      !document
        .getElementById("sliderRegular")
        .classList.contains("noUi-target")
    ) {
      Slider.create(document.getElementById("sliderRegular"), {
        start: [40],
        connect: [true, false],
        step: 1,
        range: { min: 0, max: 100 }
      });
    }
    if (
      !document.getElementById("sliderDouble").classList.contains("noUi-target")
    ) {
      Slider.create(document.getElementById("sliderDouble"), {
        start: [20, 60],
        connect: [false, true, false],
        step: 1,
        range: { min: 0, max: 100 }
      });
    }
    return function cleanup() {};
  });
  return (
    <div>
      <div id="sliderRegular" className="slider-primary" />
      <br />
      <div id="sliderDouble" className="slider-info" />
      <br />
    </div>
  );
}