Reactstrap noUiSlider
-Lightweight JavaScript range slider.
Description
Our customized noUiSlider is a lightweight JavaScript range slider library. It offers a wide selection of options and settings, and is compatible with a ton of (touch) devices, including those running iOS, Android, Windows 8/8.1/10, Windows Phone 8.1 and Windows Mobile 10.
You can change the default color of the slider, by using any of the
following classes
input-slider--cyan
,input-slider--red
,input-slider--green
,input-slider--yellow
,input-slider--pink
on the slider component. For more, check the bellow examples.
Examples
noUiSlider
import React from "react";
// plugin that creates slider
import Slider from "nouislider";
// reactstrap components
// import {
//
// } from "reactstrap";
// Core Components
function Example() {
React.useEffect(() => {
Slider.create(document.getElementById("sliderRegular"), {
start: [40],
connect: [true, false],
step: 1,
range: { min: 0, max: 100 },
});
Slider.create(document.getElementById("sliderDouble"), {
start: [20, 60],
connect: [false, true, false],
step: 1,
range: { min: 0, max: 100 },
});
}, []);
return (
<>
<div className="input-slider-container">
<div className="slider input-slider--" id="sliderRegular"></div>
<br></br>
<div className="slider input-slider--" id="sliderDouble"></div>
</div>
</>
);
}
export default Example;
noUiSlider cyan
import React from "react";
// plugin that creates slider
import Slider from "nouislider";
// reactstrap components
// import {
//
// } from "reactstrap";
// Core Components
function Example() {
React.useEffect(() => {
Slider.create(document.getElementById("sliderRegular"), {
start: [40],
connect: [true, false],
step: 1,
range: { min: 0, max: 100 },
});
Slider.create(document.getElementById("sliderDouble"), {
start: [20, 60],
connect: [false, true, false],
step: 1,
range: { min: 0, max: 100 },
});
}, []);
return (
<>
<div className="input-slider-container">
<div className="slider input-slider--cyan" id="sliderRegular"></div>
<br></br>
<div className="slider input-slider--cyan" id="sliderDouble"></div>
</div>
</>
);
}
export default Example;
noUiSlider red
import React from "react";
// plugin that creates slider
import Slider from "nouislider";
// reactstrap components
// import {
//
// } from "reactstrap";
// Core Components
function Example() {
React.useEffect(() => {
Slider.create(document.getElementById("sliderRegular"), {
start: [40],
connect: [true, false],
step: 1,
range: { min: 0, max: 100 },
});
Slider.create(document.getElementById("sliderDouble"), {
start: [20, 60],
connect: [false, true, false],
step: 1,
range: { min: 0, max: 100 },
});
}, []);
return (
<>
<div className="input-slider-container">
<div className="slider input-slider--red" id="sliderRegular"></div>
<br></br>
<div className="slider input-slider--red" id="sliderDouble"></div>
</div>
</>
);
}
export default Example;
noUiSlider green
import React from "react";
// plugin that creates slider
import Slider from "nouislider";
// reactstrap components
// import {
//
// } from "reactstrap";
// Core Components
function Example() {
React.useEffect(() => {
Slider.create(document.getElementById("sliderRegular"), {
start: [40],
connect: [true, false],
step: 1,
range: { min: 0, max: 100 },
});
Slider.create(document.getElementById("sliderDouble"), {
start: [20, 60],
connect: [false, true, false],
step: 1,
range: { min: 0, max: 100 },
});
}, []);
return (
<>
<div className="input-slider-container">
<div className="slider input-slider--green" id="sliderRegular"></div>
<br></br>
<div className="slider input-slider--green" id="sliderDouble"></div>
</div>
</>
);
}
export default Example;
noUiSlider yellow
import React from "react";
// plugin that creates slider
import Slider from "nouislider";
// reactstrap components
// import {
//
// } from "reactstrap";
// Core Components
function Example() {
React.useEffect(() => {
Slider.create(document.getElementById("sliderRegular"), {
start: [40],
connect: [true, false],
step: 1,
range: { min: 0, max: 100 },
});
Slider.create(document.getElementById("sliderDouble"), {
start: [20, 60],
connect: [false, true, false],
step: 1,
range: { min: 0, max: 100 },
});
}, []);
return (
<>
<div className="input-slider-container">
<div className="slider input-slider--yellow" id="sliderRegular"></div>
<br></br>
<div className="slider input-slider--yellow" id="sliderDouble"></div>
</div>
</>
);
}
export default Example;
noUiSlider pink
import React from "react";
// plugin that creates slider
import Slider from "nouislider";
// reactstrap components
// import {
//
// } from "reactstrap";
// Core Components
function Example() {
React.useEffect(() => {
Slider.create(document.getElementById("sliderRegular"), {
start: [40],
connect: [true, false],
step: 1,
range: { min: 0, max: 100 },
});
Slider.create(document.getElementById("sliderDouble"), {
start: [20, 60],
connect: [false, true, false],
step: 1,
range: { min: 0, max: 100 },
});
}, []);
return (
<>
<div className="input-slider-container">
<div className="slider input-slider--pink" id="sliderRegular"></div>
<br></br>
<div className="slider input-slider--pink" id="sliderDouble"></div>
</div>
</>
);
}
export default Example;
Props
If you want to see more examples and properties please check the official noUiSlider Documentation.
You can also check the Official Github Repository.