Add-on range slider for Semantic UI
I created the range slider for Semantic UI when I found that one currently did not exist.
The range slider is responsive and works for both mouse and touchscreen on all the devices it has been tested on. It uses standard css/javascript (no hacks) so it should render well on just about any remotely modern device. That said I have not thoroughly tested it, so let me know if you encounter any bugs.
##Usage
###Step 1
Add the range.js and range.css files from this repo to your project.
###Step 2
Add the range slider html.
<div class="ui range" id="my-range"></div>
###Step 3
Instantiate the range slider with jQuery:
$(document).ready(function() {
$('#my-range').range({
min: 0,
max: 10,
start: 5
});
});
Notice the settings object you pass into the jQuery function in step 3. There are 6 settings you can pass in:
- min (number; required) - the lowest value (inclusive) of the range
- max (number; required) - the highest value (inclusive) of the range
- start (number; optional) - the initial value of the range (must be between min and max)
- step (number; optional) - the increment amount between values (defaults to 1)
- input (string; optional) - A jQuery identifier string (such as '#my-input') to specify an html input to receive the new range value each time it is changed
- onChange (function; optional) - function to call each time the value of the range changes; a single parameter with the new value is passed to this function
Use the onChange
callback in the configuration options. For example:
var myRangeValue; // your javascript variable that will store the value of the slider
$('#range').range({
min: 0,
max: 100,
start: 5,
onChange: function(val) { myRangeValue = val; } // assigning the callback argument to your variable each time the value changes
});
You may also set the slider value with jQuery using the 'setValue' query like so:
$('#range').range('set value', 17); // Sets slider with id 'range' to value 17
Note that this will only work on a slider that has already been instantiated.
Check out the demo for examples.