Slider
Let the user specify a numeric value with slider component.
About slider
Component slider let the user specify a numeric value which must be no less than a given value, and no more than another given value.
To create slider add attribute data-role="slider" to element.
<input data-role="slider">
Metro 4 support two type of slider: vertical and horizontal (default).
To create vertical slider, add attribute data-vertical="true" to element.
To set specific size of the slider, use attribute data-size.
He sets the width for horizontal and height for the vertical slider.
<input data-role="slider" data-vertical="true" data-size="200">
Slider value
The slider in Metro 4 can return two types of values: the actual value and its equivalent in percent.
How the value will be returned determines the attribute data-return-type, it can take two values: value and percent.
By default slider return actual value.
To return value in percent equivalent, set this attribute to data-return-type="percent".
Return actual value
Return percent
<input data-role="slider" data-return-type="value">
<input data-role="slider" data-return-type="percent">
Accuracy
You can set accuracy for slider with attribute data-accuracy.
<input data-role="slider" data-accuracy="5" data-hint-always="true">
Additional target
You can put slider value to additional targets. To set it, add attribute data-target="..." to element. Value for this attribute must be selector specific string.
<input data-role="slider" data-target="#slider-target1, #slider-target2">
<div class="p-2 bg-cyan fg-white text-center" id="slider-target"></div>
<input type="text" id="slider-target2">
Buffer
Very often the slider is used to create a control in the media player where it is necessary to show the buffering process. Slider Metro 4 provides such a possibility "out of the box."
To set buffer use attribute data-buffer or special methods (see below).
<input data-role="slider" data-buffer="60" data-value="20">
Important! For buffer you must use percent value!
Hint
You can enable hint for slider. To enable hint add attribute data-hint="true" to element.
<input data-role="slider" data-hint="true">
Also you can make the hint as permanent. To set hint in permanent mode add attribute data-hint-always="true".
<input data-role="slider" data-hint="true" data-hint-always="true">
Hint position
You can set hint position with attribute data-hint-position. To set specific position use next values for this attribute:
top,
bottom,
left and
right.
<input data-role="slider" data-hint-position="top">
<input data-role="slider" data-hint-position="bottom">
<input data-role="slider" data-hint-position="left">
<input data-role="slider" data-hint-position="right">
Hint value
You can use template for hint value with two variables $1 and $2.
First - actual value, second - percent value.
<input data-role="slider"
data-hint-mask="V: $1, $2%"
data-hint-always="true"
data-value="0"
data-show-min-max="true"
data-min="-40" data-max="40">
Options
| Options | Data-* | Default | Desc |
|---|---|---|---|
| min | data-min |
0 | Min slider value |
| max | data-max |
100 | Max slider value |
| showMinMax | data-show-min-max |
false | When true, additional block will be created and inserted before slider |
| value | data-value |
0 | Initial slider value |
| accuracy | data-accuracy |
0 | Slider accuracy |
| buffer | data-buffer |
0 | Initial slider buffer value |
| hint | data-hint |
false | Show slider hint |
| hintAlways | data-hint-always |
false | Show slider hint permanent |
| hintPosition | data-hint-position |
top | Hint position. Can be: top, left, right, bottom |
| hintMask | data-hint-mask |
$1 | Hint output mask (template) |
| vertical | data-vertical |
false | Vertical slider orientation |
| target | data-target |
Additional targets for slider value | |
| returnType | data-return-type |
How value will be returned: value or percent | |
| size | data-size |
0 | Slider specific size |
Events
When slider works, it generated the numbers of events. You can use callback for this event to behavior with slider.
| Event | Data-* | Desc |
|---|---|---|
| onStart(val, percent, slider) | data-on-start |
Fired when start sliding |
| onStop(val, percent, slider) | data-on-stop |
Fired when stop sliding |
| onMove(val, percent, slider) | data-on-move |
Fired when user move slider marker |
| onClick(val, percent, slider) | data-on-click |
Fired when user clicked on slider |
| onChangeValue(val, percent, slider) | data-on-change-value |
Fired when slider value was changed |
| onChangeBuffer(val, slider) | data-on-change-buffer |
Fired when slider buffer value was changed |
| onFocus(val, percent, slider) | data-on-focus |
Fired when slider marker get focus |
| onBlur(val, percent, slider) | data-on-blur |
Fired when slider marker loses focus |
| onSliderCreate(slider) | data-on-slider-create |
Fired when slider was created |
Also you can use standard onchage event for input with data-role="slider".
<input data-role="slider"
data-show-min-max="true"
data-min="-100" data-max="100"
data-on-change-value="$('#event-receiver').val('Value: '+arguments[0]+', '+arguments[1]+'%')">
<input type="text" id="event-receiver">
Methods
In additional, You can use slider methods to interact with the component.
- val() - get value
- val(v) - set value
- buff() - get buffer value
- buff(v) - set buffer value
<div class="row">
<div class="cell-md-6">
<input type="number" min="0" max="100"
oninput="$('#slider-methods').data('slider').val(this.value)">
</div>
<div class="cell-md-6">
<input data-role="slider" data-accuracy="10" id="slider-methods">
</div>
</div>
Observe
You can change attributes data-value, data-buffer at runtime and slider will be updated.
Change value in input and observe how value changed in slider
<div class="row">
<div class="cell-md-6">
<input type="number" min="0" max="100" id="inp-obs" value="0">
</div>
<div class="cell-md-6">
<input data-role="slider" id="slider-obs">
</div>
</div>
<script>
$("#inp-obs").on("keyup input change paste propertychange", function(){
$('#slider-obs').attr('data-value', this.value);
})
</script>
Customize
If you need to customize the slider, you can use next options:
| Option | Data-* | Desc |
|---|---|---|
| clsSlider | data-cls-slider |
Additional class for slider |
| clsBackside | data-cls-backside |
Additional class for slider backside |
| clsComplete | data-cls-complete |
Additional class for slider complete |
| clsBuffer | data-cls-buffer |
Additional class for slider buffer |
| clsMarker | data-cls-marker |
Additional class for slider marker |
| clsHint | data-cls-hint |
Additional class for slider hint |
| clsMinMax | data-cls-min-max |
Additional class for min-max info block |
| clsMin | data-cls-min |
Additional class for min value for info block |
| clsMax | data-cls-max |
Additional class for max value for info block |
<input data-role="slider"
data-value="50"
data-buffer="75"
data-hint-always="true"
data-hint-position="bottom"
data-show-min-max="true"
data-cls-backside="bg-dark"
data-cls-marker="bg-blue border-50 custom-marker"
data-cls-hint="bg-cyan custom-marker shadow-2"
data-cls-complete="bg-red"
data-cls-buffer="bg-yellow"
data-cls-min-max="bg-green fg-white p-2 mb-3-minus">
Secret classes :)
<input data-role="slider" class="thin">
<input data-role="slider" class="ultra-thin">
<input data-role="slider" class="ultra-thin cycle-marker">