NoUiSlider

noUiSlider is a lightweight range slider with multi-touch support and a ton of features. It supports non-linear ranges, requires no external dependencies, has keyboard support, and it works great in responsive designs.

Reference
Input control is attached to slider
dates to numerical ranges, and then use the update event to display them in a pretty format.
0
25
50
75
100
20.00
80.0
always show slider values.
noUiSlider's 'update' method is useful for synchronizing with other elements
20
80
If you want to disable the edges of a slider, the set event can be used to reset the value if a limit is passed.
Vertical orientation slider example
Settings
Theme Mode

Light / Dark / System

  • Sidebar theme

    Dark / Light

  • Sidebar Caption

    Show / Hide

  • Theme Layout

    LTR/RTL

  • Layout Width

    Full / Fixed

  • Custom Theme

    Choose your primary theme color

  • Header Theme

    Choose your Header theme color

  • Navbar Theme

    Choose your Navbar theme color

  • Logo Theme

    Choose your Logo theme color

  • Navbar Caption Color

    Choose your Navbar Caption Color

  • Navbar Image

    Choose your Navbar Background Image

  • Dropdown Menu Icon

    Choose your Dropdown Menu Icon

  • Dropdown Menu Link Icon

    Choose your Dropdown Menu Link Icon