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 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.