This time I will share jQuery Plugin and tutorial about Draggable & Touchable Numeric Slider In jQuery, hope it will help you in programming stack.
A simple, powerful, customizable and touch-enabled jQuery numeric slider plugin for selecting numerical values by clicking/tapping and dragging the slider thumb.
How to use it:
1. Load the jquery-slider-min.js script after loading jQuery library.
1 |
<script src="/path/to/cdn/jquery.min.js"></script> |
2 |
<script src="/path/to/jquery-slider-min.js"></script> |
2. Load jQuery Mobile library for touch support.
1 |
<script src="/path/to/cdn/jquery.mobile.min.js"></script> |
3. Create a basic numeric slider using the data-slider-box attribute:
1 |
<div data-slider-box></div> |
4. Or initialize the plugin via JavaScript:
1 |
<div class="example"></div> |
2 |
$('.example').createSlide(); |
5. Determine the max value. Ideal for a range slider. Default: 100.
1 |
$('.example').createSlide({ |
6. Determine the width of the numeric slider. Default: width of of its parent container.
1 |
$('.example').createSlide({ |
7. Determine the step size. Default: 1.
1 |
$('.example').createSlide({ |
8. Output the numeric value in a container.
1 |
<div class="output"></div> |
1 |
$('.example').createSlide({ |
9. Customize the progress bar that fills all the space left to the thumb.
1 |
$('.example').createSlide({ |
3 |
background-color: #222; |
10. Customize the initial text to be displayed on the slider thumb.
1 |
$('.example').createSlide({ |
11. Customize the styles of the slider thumb.
1 |
$('.example').createSlide({ |
