Range Slider Vue Component
Range Slider Vue component represents Range Slider component.
Range Slider Components
There are following components included:
f7-range
Range Slider Properties
Prop | Type | Default | Description |
---|---|---|---|
<f7-range> properties | |||
init | boolean | true | Initializes Range Slider |
value | number array string | Range Slider value, must be array in case of dual range slider | |
min | number string | Minimum value | |
max | number string | Maximum value | |
step | number string | 1 | Minimal step between values |
label | boolean | false | Enables additional label around range slider knob |
dual | boolean | false | Enables dual range slider |
vertical | boolean | false | Enables vertical range slider |
vertical-reversed | boolean | false | Makes vertical range slider reversed. (Only when vertical:true ) |
draggable-bar | boolean | true | When enabled it is also possible to interact with range slider (change value) on range bar click and swipe. |
format-label | function(value) | Method must return formatted range knob label text. As an argument it receives label value | |
scale | boolean | false | Enables range slider scale |
scale-steps | number | 5 | Number of scale steps |
scale-sub-steps | number | 0 | Number of scale sub steps (each step will be divided by this value) |
format-scale-label | function (value) | Method must return formatted scale value. As an argument it receives currect scale step value. This method will be called as for each scale step. | |
limit-knob-position | boolean | Limits knob position to the size of the range bar. By default enabled from iOS theme | |
disabled | boolean | false | Defines whether the range slider is disabled or not |
id | string | Range slider element ID attribute | |
input | boolean | false | If enabled, then it will render input type="range" element inside as well |
input-id | string | Input element ID attribute | |
name | string | Input element "name" attribute |
Range Slider Events
Event | Description |
---|---|
<f7-range> events | |
range:change | Event will be triggered when Range Slider value has been changed |
range:changed | Event will be triggered on slider knob release after value change |
Range Slider Methods
<f7-range> methods | |
---|---|
.setValue(newValue) | Set new range slider value |
.getValue() | Returns range slider value |
Examples
<template>
<f7-page>
<f7-navbar title="Range Slider"></f7-navbar>
<f7-block-title>Volume</f7-block-title>
<f7-list simple-list>
<f7-list-item>
<f7-list-item-cell class="width-auto flex-shrink-0">
<f7-icon ios="f7:speaker_fill" aurora="f7:speaker_fill" md="material:volume_mute"></f7-icon>
</f7-list-item-cell>
<f7-list-item-cell class="flex-shrink-3">
<f7-range
:min="0"
:max="100"
:step="1"
:value="10"
></f7-range>
</f7-list-item-cell>
<f7-list-item-cell class="width-auto flex-shrink-0">
<f7-icon ios="f7:speaker_3_fill" aurora="f7:speaker_3_fill" md="material:volume_up"></f7-icon>
</f7-list-item-cell>
</f7-list-item>
</f7-list>
<f7-block-title>Brightness</f7-block-title>
<f7-list simple-list>
<f7-list-item>
<f7-list-item-cell class="width-auto flex-shrink-0">
<f7-icon ios="f7:sun_min" aurora="f7:sun_min" md="material:brightness_low"></f7-icon>
</f7-list-item-cell>
<f7-list-item-cell class="flex-shrink-3">
<f7-range
:min="0"
:max="100"
:step="1"
:value="50"
:label="true"
color="orange"
></f7-range>
</f7-list-item-cell>
<f7-list-item-cell class="width-auto flex-shrink-0">
<f7-icon ios="f7:sun_max_fill" aurora="f7:sun_max_fill" md="material:brightness_high"></f7-icon>
</f7-list-item-cell>
</f7-list-item>
</f7-list>
<f7-block-title class="display-flex justify-content-space-between">Price Filter <span>${{priceMin}} - ${{priceMax}}</span></f7-block-title>
<f7-list simple-list>
<f7-list-item>
<f7-list-item-cell class="width-auto flex-shrink-0">
<f7-icon ios="f7:money_dollar_circle" aurora="f7:money_dollar_circle" md="material:attach_money"></f7-icon>
</f7-list-item-cell>
<f7-list-item-cell class="flex-shrink-3">
<f7-range
:min="0"
:max="500"
:step="1"
:value="[priceMin, priceMax]"
:label="true"
:dual="true"
color="green"
@range:change="onPriceChange"
></f7-range>
</f7-list-item-cell>
<f7-list-item-cell class="width-auto flex-shrink-0">
<f7-icon ios="f7:money_dollar_circle_fill" aurora="f7:money_dollar_circle_fill" md="material:monetization_on"></f7-icon>
</f7-list-item-cell>
</f7-list-item>
</f7-list>
<f7-block-title>With Scale</f7-block-title>
<f7-block strong>
<f7-range
:min="0"
:max="100"
:label="true"
:step="5"
:value="25"
:scale="true"
:scale-steps="5"
:scale-sub-steps="4"
></f7-range>
</f7-block>
<f7-block-title>Vertical</f7-block-title>
<f7-block strong class="display-flex justify-content-center">
<f7-range
class="margin-right"
style="height: 160px"
:vertical="true"
:min="0"
:max="100"
:label="true"
:step="1"
:value="25"
/></f7-range>
<f7-range
class="margin-horizontal"
style="height: 160px"
:vertical="true"
:min="0"
:max="100"
:label="true"
:step="1"
:value="50"
/></f7-range>
<f7-range
class="margin-horizontal"
style="height: 160px"
:vertical="true"
:min="0"
:max="100"
:label="true"
:step="1"
:value="75"
/></f7-range>
<f7-range
class="margin-left"
style="height: 160px"
:dual="true"
:vertical="true"
:min="0"
:max="100"
:label="true"
:step="1"
:value="[25, 75]"
/></f7-range>
</f7-block>
<f7-block-title>Vertical Reversed</f7-block-title>
<f7-block strong class="display-flex justify-content-center">
<f7-range
class="margin-right"
color="red"
style="height: 160px"
:vertical="true"
:vertical-reversed="true"
:min="0"
:max="100"
:label="true"
:step="1"
:value="25"
/></f7-range>
<f7-range
class="margin-horizontal"
color="red"
style="height: 160px"
:vertical="true"
:vertical-reversed="true"
:min="0"
:max="100"
:label="true"
:step="1"
:value="50"
/></f7-range>
<f7-range
class="margin-horizontal"
color="red"
style="height: 160px"
:vertical="true"
:vertical-reversed="true"
:min="0"
:max="100"
:label="true"
:step="1"
:value="75"
/></f7-range>
<f7-range
class="margin-left"
color="red"
style="height: 160px"
:dual="true"
:vertical="true"
:vertical-reversed="true"
:min="0"
:max="100"
:label="true"
:step="1"
:value="[25, 75]"
/></f7-range>
</f7-block>
</f7-page>
</template>
<script>
export default {
data() {
return {
priceMin: 200,
priceMax: 400,
};
},
methods: {
onPriceChange(values) {
this.priceMin = values[0];
this.priceMax = values[1];
},
},
};
</script>