Double Slider

Let the user specify a numeric range value with a double slider component.

About slider

Component doubleslider let the user specify a numeric range value which must be no less than a given value, and no more than another given value. To create doubleslider add attribute data-role="doubleslider" to input element.


                    <input data-role="doubleslider">

Currently Metro UI support only horizontal type of slider.

Slider value

The slider return comma separated value.

Return actual value


                    <input data-role="doubleslider"
                        data-min="-40" data-max="40"
                        onchange="$('#slider-return-value').val(this.value)">

                    <input type="text" id="slider-return-value">

You can change attribute data-value-min, data-value-max at runtime and slider will be updated.

Accuracy

You can set accuracy for slider with attribute data-accuracy.


                    <input data-role="doubleslider" 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="doubleslider" 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">

Hint

You can enable hint for slider. To enable hint add attribute data-hint="true" to element.


                    <input data-role="doubleslider" 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="doubleslider" data-hint="true" data-hint-always="true">

Hint position

You can set hint position with attribute data-hint-position-min and data-hint-position-max. To set specific position use next values for this attribute: top, bottom, left and right.


                    <input data-role="doubleslider"
                           data-value-min="20"
                           data-value-max="80"
                           data-hint-position-min="left"
                           data-hint-position-max="right"
                           data-hint-always="true"
                           data-cls-hint="bg-red fg-white">

Hint value

You can use template for hint value with two variables $1.


                    <input data-role="doubleslider"
                           data-show-min-max="true"
                           data-hint-mask-min="Min: $1"
                           data-hint-mask-max="Max: $1"
                           data-hint-always="true"
                           data-value-min="20"
                           data-value-max="80"
                           data-cls-hint="bg-cyan fg-white">

Options

Events

When slider works, it generated the numbers of events. You can use callback for this event to behavior with slider.

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
onChange(val, percent)	`data-on-change-value`	Fired when slider value was changed
onChangeValue(val)	`data-on-change-value`	Fired when slider 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
onDoubleSliderCreate(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])">

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

Methods

In additional, You can use slider methods to interact with the component.

val() - get value
val(vMin, vMax) - set value


                    <div class="row">
                        <div class="cell-md-6">
                            <input type="text" min="0" max="100"
                            oninput="Metro.getPlugin('#slider','slider').val(this.value)">
                        </div>
                        <div class="cell-md-6">
                            <input data-role="slider" data-accuracy="10" id="slider">
                        </div>
                    </div>

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
clsMarker	`data-cls-marker`	Additional class for slider marker
clsMarkerMin	`data-cls-marker-min`	Additional class for slider marker min
clsMarkerMax	`data-cls-marker-max`	Additional class for slider marker max
clsHint	`data-cls-hint`	Additional class for slider hint
clsHintMin	`data-cls-hint-min`	Additional class for slider hint min
clsHintMax	`data-cls-hint-max`	Additional class for slider hint max
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="doubleslider"
                           data-value-min="20"
                           data-value-max="80"
                           data-hint-always="true"
                           data-hint-position-min="bottom"
                           data-hint-position-max="top"
                           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-min-max="text-bold">

Secret classes :)


                    <input data-role="doubleslider" class="thin">
                    <input data-role="doubleslider" class="ultra-thin">
                    <input data-role="doubleslider" class="ultra-thin cycle-marker">

Table of contents