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 | Maximum value |
| 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
| Event | Description |
|---|---|
| <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:volume_mute_fill" aurora="f7:volume_mute_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:volume_fill" aurora="f7:volume_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:circle" aurora="f7:circle" 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:circle_half" aurora="f7:circle_half" 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_round" aurora="f7:money_dollar_round" 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_round_fill" aurora="f7:money_dollar_round_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>