Press "Enter" to skip to content

Simple and Beautiful Smooth Range Slider in Pure JavaScript | Sliders.js

Sliders.js allows you to add practical value sliders as input to your HTML forms. Yet one other JavaScript plugin that converts common textual content enter fields into customized vary slider controls.

pure javascript range slider, how to get range slider value in javascript, bs range slider with tooltip, jquery range slider with steps, range slider design

How to make use of it:

1. Insert the required JavaScript and CSS information into the HTML.

<link rel="stylesheet" href="slider.css" />
<script src="sliders.js"></script>

2. Create a fundamental customized range slider.

<input type="text" identify="value1" text="Default slider:" />

3. Specify the min/max values.

<input type="text" name="value1" text="Default slider:" min=0 max=10 />

4. Enable easy move expertise.

<input type="text" name="value1" text="Default slider:" smooth=yes />

5. Customize decimal places.

<input type="text" name="value1" text="Default slider:" round=2 value=0.58 />

6. Specify the fill color.

<input type="text" name="value1" text="Default slider:" color="#ffc8c7" />


There are many attributes, which can modify the slider’s functionalities.

Here is a list of them:

texttextVisible slider title
minnumberThe lower boundary of the slider must be lower than the max0
maxnumberThe upper boundary of the slider must be higher than the min100
valuenumberThe default value of the slidermin
roundnumberDecimal places of value rounding0
animateyes / noEnable or disable slider animationyes
smoothyes / noSmooth movement of the small range sliderno
colorcolorSpecify fill color#7EF4FF

range slider with button, range slider with percentage

See Demo And Download

Official Website(BlueManCZ): Click Here

This superior jQuery/javascript plugin is developed by BlueManCZ. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.