Range Slider
Range Slider Layout
Single Range
Single range slider layout is pretty simple:
<!-- Range Slider element -->
<div class="range-slider">
<!-- range input -->
<input type="range" min="0" max="100" step="1" value="10">
</div>
Dual Range
Dual range slider is more simpler as it doesn’t require input element because input:range doesn’t support dual range:
<!-- Range Slider element -->
<div class="range-slider"></div>
Range Slider Colors
Range Slider supports all default colors. So to change its color just add color-[color] class to range slider element.
<!-- red range -->
<div class="range-slider color-red">...</div>
<!-- orange range -->
<div class="range-slider color-orange">...</div>
Range Slider App Methods
Let’s look at related App methods to work with Range Slider:
app.range.create(parameters)- create Range Slider instance
- parameters - object. Object with range slider parameters
Method returns created Range Slider’s instance
app.range.destroy(el)- destroy Range Slider instance
- el - HTMLElement or string (with CSS Selector) or object. Range Slider element or Range Slider instance to destroy.
app.range.get(el)- get Range Slider instance by HTML element
- el - HTMLElement or string (with CSS Selector). Range Slider element.
Method returns Range Slider’s instance
app.range.getValue(el)- get Range Slider value
- el - HTMLElement or string (with CSS Selector). Range Slider element.
Method returns range slider value
app.range.setValue(el, value)- set new Range Slider value
- el - HTMLElement or string (with CSS Selector). Range Slider element.
- value - number (in case of single range) or array of values (in case of dual range)
Method returns Range Slider’s instance
Range Slider Parameters
Now let’s look at list of available parameters we need to create Range Slider:
Parameter | Type | Default | Description |
---|---|---|---|
el | HTMLElement string | Range Slider element. HTMLElement or string with CSS selector of range slider element | |
inputEl | HTMLElement string | Range Slider input element or CSS selector of input element. If not specified, will try to look for input type=”range” inside of range slider element | |
dual | boolean | false | Enable dual range slider |
step | number | 1 | Minimal step between values |
label | boolean | false | Enables additional label around range slider knob |
min | number | Minimum value | |
max | number | Maximum value | |
value | number array | Initial value. Number in case of single range, and array of values in case of dual range | |
draggableBar | boolean | true | When enabled it is also possible to interact with range slider (change value) on range bar click and swipe. |
formatLabel | function(value) | Method must return formatted range knob label text. As an argument it receives label value | |
on | object | Object with events handlers. For example:
|
Range Slider Methods & Properties
So to create Range Slider we have to call:
var range = app.range.create({ /* parameters */ })
After that we have its initialized instance (like range
variable in example above) with useful methods and properties:
Properties | |
---|---|
range.app | Link to global app instance |
range.el | Range Slider HTML element |
range.$el | Dom7 instance with range slider HTML element |
range.inputEl | Range Slider input HTML element |
range.$inputEl | Dom7 instance with range slider input HTML element |
range.rangeWidth | Range slider width (in px) |
range.dual | Boolean property indicating whether it is dual or not |
range.min | Range min value |
range.max | Range max value |
range.value | Range value |
range.knobs | Array where each element represents HTMLElement of created range knob (2 knobs in case of dual slider) |
range.labels | Array where each element represent HTMLElement of created range knob label (2 labels in case of dual slider) |
range.params | Range Slider parameters |
Methods | |
range.getValue() | Returns range slider value |
range.setValue(value) | Set new range slider value |
range.destroy() | Destroys range slider instance |
range.on(event, handler) | Add event handler |
range.once(event, handler) | Add event handler that will be removed after it was fired |
range.off(event, handler) | Remove event handler |
range.off(event) | Remove all handlers for specified event |
range.emit(event, …args) | Fire event on instance |
Range Slider Events
Range Slider will fire the following DOM events on range element and events on app and range instance:
DOM Events
Event | Target | Description |
---|---|---|
range:change | Range Slider Element<div class=”range-slider”> | Event will be triggered when Range Slider value has been changed |
range:changed | Range Slider Element<div class=”range-slider”> | Event will be triggered on slider knob release after value change |
range:beforedestroy | Range Slider Element<div class=”range-slider”> | Event will be triggered right before Range Slider instance will be destroyed |
App and Range Slider Instance Events
Range Slider instance emits events on both self instance and app instance. App instance events has same names prefixed with range
.
Event | Arguments | Target | Description |
---|---|---|---|
change | (range) | range | Event will be triggered when range value has been changed. As an argument event handler receives range instance |
rangeChange | (range) | app | |
changed | (range) | range | Event will be triggered on slider knob release after value change. As an argument event handler receives range instance |
rangeChanged | (range) | app | |
beforeDestroy | (range) | range | Event will be triggered right before Range Slider instance will be destroyed. As an argument event handler receives range instance |
rangeBeforeDestroy | (range) | app |
Range Slider Auto Initialization
If you don’t need to use Range Slider API and your Range Slider is inside of the page and presented in DOM on moment of page initialization then it can be auto initialized with just adding additional range-slider-init
class:
<!-- Add range-slider-init class -->
<div class="range-slider range-slider-init">
<input type="range" min="0" max="100" step="1" value="10">
</div>
In this case if you need to access created Range Slider instance you can use the app.range.get
app method:
var range = app.range.get('.range-slider');
if (range.value > 50) {
// do something
}
When using auto init you may need to pass additional parameters. It can be done with two ways:
In you case you use single-range slider and you have input:range inside, then
step
,min
,max
,value
parameters can be set from same input attributes:<!-- min, max, step, value parameters will be set for same input attributes -->
<div class="range-slider range-slider-init">
<input type="range" min="0" max="100" step="1" value="10">
</div>
Otherwise, if you don’t have input:range inside or you use dual range input you can set all available parameters via
data-
attributes on range slider element.<!-- parameters set via data- attributes -->
<div
class="range-slider range-slider-init"
data-min="0"
data-max="100"
data-step="10"
data-label="true"
data-value="50"
></div>
In case you have dual range slider, then you need to pass to values using
data-value-left
anddata-value-right
attributes:<!-- parameters set via data- attributes -->
<div
class="range-slider range-slider-init"
data-dual="true"
data-min="0"
data-max="100"
data-step="10"
data-label="true"
data-value-left="30"
data-value-right="60"
></div>
Examples
<div class="block-title">Volume</div>
<div class="list simple-list">
<ul>
<li>
<div class="item-cell width-auto flex-shrink-0">
<i class="icon f7-icons ios-only">volume_mute_fill</i>
<i class="icon material-icons md-only">volume_mute</i>
</div>
<div class="item-cell flex-shrink-3">
<!-- range slider -->
<div class="range-slider range-slider-init">
<input type="range" min="0" max="100" step="1" value="10">
</div>
</div>
<div class="item-cell width-auto flex-shrink-0">
<i class="icon f7-icons ios-only">volume_fill</i>
<i class="icon material-icons md-only">volume_up</i>
</div>
</li>
</ul>
</div>
<div class="block-title">Brightness</div>
<div class="list simple-list">
<ul>
<li>
<div class="item-cell width-auto flex-shrink-0">
<i class="icon f7-icons ios-only">circle</i>
<i class="icon material-icons md-only">brightness_low</i>
</div>
<div class="item-cell flex-shrink-3">
<!-- range slider, enable labels -->
<div class="range-slider range-slider-init color-orange" data-label="true">
<input type="range" min="0" max="100" step="1" value="50">
</div>
</div>
<div class="item-cell width-auto flex-shrink-0">
<i class="icon f7-icons ios-only">circle_half</i>
<i class="icon material-icons md-only">brightness_high</i>
</div>
</li>
</ul>
</div>
<div class="block-title display-flex justify-content-space-between">Price Filter <span class="price-value">$200 - $400</span></div>
<div class="list simple-list">
<ul>
<li class="item-row">
<div class="item-cell width-auto flex-shrink-0">
<i class="icon f7-icons ios-only">money_dollar</i>
<i class="icon material-icons md-only">attach_money</i>
</div>
<div class="item-cell item-cell-shrink-3">
<!-- Dual range slider with all the parameters passed via data- attributes -->
<div
id="price-filter"
class="range-slider range-slider-init color-green"
data-label="true"
data-dual="true"
data-min="0"
data-max="500"
data-step="1"
data-value-left="200"
data-value-right="400"
></div>
</div>
<div class="item-cell width-auto flex-shrink-0">
<i class="icon f7-icons ios-only">money_dollar_fill</i>
<i class="icon material-icons md-only">monetization_on</i>
</div>
</li>
</ul>
</div>
Handle price change:
$$('#price-filter').on('range:change', function (e, range) {
$$('.price-value').text('$'+(range.value[0])+' - $'+(range.value[1]));
});