Simple Smooth Range Slider In JavaScript – Sliders.js

Preview:

Description:

Yet another JavaScript plugin that converts regular text input fields into custom range slider controls.

How to use it:

1. Insert the necessary JavaScript and CSS files into the HTML.

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

2. Create a basic custom range slider.

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

3. Specify the min/max values.

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

4. Enable a smooth move experience.

<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" />