Metro UI CSS provides a component for creating slider.
To create slider you can use next html structure:
<div class="slider" data-role="slider"></div> <div class="slider vertical" data-role="slider"></div>
Slider supported next options:
| position | data-position | determines the starting position of marker |
| accuracy | data-accuracy | determines the accuracy of the marker (from 1 to 100) |
| color | data-color | determines the color of the slider |
| completeColor | data-complete-color | determines the complete color of the slider |
| markerColor | data-marker-color | determines the marker color |
| colors | data-colors | defines a set of colors that will be applied uniformly to complete color when marker is moving |
| showHint | data-show-hint | show or hide hint for value of marker position |
| min | data-min | Set the minimum value for the slider. |
| max | data-max | Set the maximum value for the slider. |
| animate | data-animate | Animate slider movements for fluent movements. |
You can sets options over javascript or data-* api.
<div class="slider" data-role="slider" data-position="0" data-accuracy="0" data-colors="blue, red, yellow, green"></div>
$(function(){
var slider = $("#slider").slider({
position: 10,
accuracy: 1
});
});
// Short method to set position
slider.slider('value', 15);
This component required metro-slider.js