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">


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">


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!


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-min="-40" data-max="40">


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


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-min="-100" data-max="100"
                        data-on-change-value="$('#event-receiver').val('Value: '+arguments[0]+', '+arguments[1]+'%')">

                    <input type="text" id="event-receiver">


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"
                        <div class="cell-md-6">
                            <input data-role="slider" data-accuracy="10" id="slider-methods">


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 class="cell-md-6">
                            <input data-role="slider" id="slider-obs">
                        $("#inp-obs").on("keyup input change paste propertychange", function(){
                            $('#slider-obs').attr('data-value', this.value);


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-cls-marker="bg-blue border-50 custom-marker"
                           data-cls-hint="bg-cyan custom-marker shadow-2"
                           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">