Sliders.js allows you to add practical, value sliders as inputs to your HTML forms. Check live demo.
First download files: sliders.js and slider.css.
Then include these files into your HTML file:
<script type="text/javascript" src="sliders.js"></script><link rel=stylesheet href="slider.css">You can easily create slider as HTML input.
<input type="text" class="slider1" name="value1" text="Value 1:">Important! Each slider must have same class "slider1" and different name attribute!
There are many attributes, which can modify slider's functionalities.
Here is list of them:
| Attribute | Value | Description | Default |
|---|---|---|---|
| text | text | Visible slider title | - |
| min | number | Lower boundary of slider, must be lower than max | 0 |
| max | number | Upper boundary of slider, must be higher than min | 100 |
| value | number | Default value of slider | min |
| round | number | Decimal places of value rounding | 0 |
| animate | yes / no | Enable or disable slider animation | yes |
| smooth | yes / no | Smooth movement of small range slider | no |
| color | color | Specify fill color | #7EF4FF |
Use attributes in input tag: (example)
<input type="text" class="slider1" name="value1" text="Value 1:" min="10" max="20" value="15" round="2">You can of course use the default input attributes as id, autocomplete, title, etc.