This time I will share jQuery Plugin and tutorial about Mobile-friendly Range Slider Plugin With jQuery – MT-RangeSlider, hope it will help you in programming stack.
A simple yet powerful jQuery plugin that turns an input field into a customizable single- or multiple-range slider with support of both touch swipe and mouse drag support.
How to use it:
1. Load the jQuery MT-RangeSlider plugin’s stylesheet in the head section of the document.
1 |
< link href = "mt-range-slider.css" rel = "stylesheet" > |
2. Create a normal input field for the range slider.
1 |
< input type = "text" id = "slider" class = "slider" value = "" name = "slider" > |
3. Load jQuery library and the jQuery MT-RangeSlider plugin’s script at the end of the document.
1 |
< script src = "//code.jquery.com/jquery-2.2.3.min.js" ></ script > |
2 |
< script src = "js/jquery.mtRangeSlider.js" ></ script > |
4. Initialize the plugin to generate a basic range slider.
1 |
$( ".slider" ).mtRangeSlider({ |
5. Default configuration options.
01 |
$( ".slider" ).mtRangeSlider({ |
6. Handle for positioning Slider.
1 |
sliderHandle = $( "#slider" ).data( "mtRangeSlider" ), |
7. Handle for getting SliderHandle values.
1 |
sliderElement = document.getElementById( "slider" ), |
8. Handle for getting & setting the value for the input box.
1 |
inputValue = document.getElementById( "red-value" ); |
Changelog:
2021-01-02
- Now using addEventListener
2019-05-10
- Compatible with jQuery 3.4+
2016-09-11
- Added mobile friendly styling
2016-06-30