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 |
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 | |
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 |
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" 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" 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" 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" 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:circle" md="material:brightness_low"></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:circle_half" md="material:brightness_high"></f7-icon>
</f7-list-item-cell>
</f7-list-item>
</f7-list>
</f7-page>
</template>
<script>
export default {
data() {
return {
priceMin: 200,
priceMax: 400,
};
},
methods: {
onPriceChange(values) {
this.priceMin = values[0];
this.priceMax = values[1];
},
},
};
</script>
当前内容版权归 Framework7 或其关联方所有,如需对内容或内容相关联开源项目进行关注与资助,请访问 Framework7 .