Nextjs noUiSlider

Pro Component

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 slider-$color, where $color can be one of primary, info, success, warning, danger.

Examples

noUiSlider primary

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 slider-primary" id="sliderRegular"></div>
      <br></br>
      <div className="slider slider-primary" id="sliderDouble"></div>
    </div>
    </>
  );
}

export default Example;

noUiSlider info

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 slider-info" id="sliderRegular"></div>
      <br></br>
      <div className="slider slider-info" id="sliderDouble"></div>
    </div>
    </>
  );
}

export default Example;

noUiSlider success

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 slider-success" id="sliderRegular"></div>
      <br></br>
      <div className="slider slider-success" id="sliderDouble"></div>
    </div>
    </>
  );
}

export default Example;

noUiSlider warning

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 slider-warning" id="sliderRegular"></div>
      <br></br>
      <div className="slider slider-warning" id="sliderDouble"></div>
    </div>
    </>
  );
}

export default Example;

noUiSlider danger

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 slider-danger" id="sliderRegular"></div>
      <br></br>
      <div className="slider slider-danger" 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.