Range Slider - 图1

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

PropTypeDefaultDescription
<f7-range> properties
initbooleantrueInitializes Range Slider
valuenumber
array
string		Range Slider value, must be array in case of dual range slider
minnumber
string		Minimum value
maxnumber
string		Maximum value
stepnumber
string		1Maximum value
labelbooleanfalseEnables additional label around range slider knob
dualbooleanfalseEnables dual range slider
draggable-barbooleantrueWhen enabled it is also possible to interact with range slider (change value) on range bar click and swipe.
format-labelfunction(value)Method must return formatted range knob label text. As an argument it receives label value
disabledbooleanfalseDefines whether the range slider is disabled or not
idstringRange slider element ID attribute
inputbooleanfalseIf enabled, then it will render input type=”range” element inside as well
input-idstringInput element ID attribute

Range Slider Events

EventDescription
<f7-range> events
range:changeEvent will be triggered when Range Slider value has been changed
range:changedEvent will be triggered on slider knob release after value change

Range Slider Methods

EventDescription
<f7-range> methods
.setValue(newValue)Set new range slider value
.getValue()Returns range slider value

Examples

  1. <template>
  2.   <f7-page>
  3.     <f7-navbar title="Range Slider"></f7-navbar>
  5.     <f7-block-title>Volume</f7-block-title>
  6.     <f7-list simple-list>
  7.       <f7-list-item>
  8.         <f7-list-item-cell class="width-auto flex-shrink-0">
  9.           <f7-icon ios="f7:volume_mute_fill" md="material:volume_mute"></f7-icon>
  10.         </f7-list-item-cell>
  11.         <f7-list-item-cell class="flex-shrink-3">
  12.           <f7-range
  13.             :min="0"
  14.             :max="100"
  15.             :step="1"
  16.             :value="10"
  17.           ></f7-range>
  18.         </f7-list-item-cell>
  19.         <f7-list-item-cell class="width-auto flex-shrink-0">
  20.           <f7-icon ios="f7:volume_fill" md="material:volume_up"></f7-icon>
  21.         </f7-list-item-cell>
  22.       </f7-list-item>
  23.     </f7-list>
  25.     <f7-block-title>Brightness</f7-block-title>
  26.     <f7-list simple-list>
  27.       <f7-list-item>
  28.         <f7-list-item-cell class="width-auto flex-shrink-0">
  29.           <f7-icon ios="f7:circle" md="material:brightness_low"></f7-icon>
  30.         </f7-list-item-cell>
  31.         <f7-list-item-cell class="flex-shrink-3">
  32.           <f7-range
  33.             :min="0"
  34.             :max="100"
  35.             :step="1"
  36.             :value="50"
  37.             :label="true"
  38.             color="orange"
  39.           ></f7-range>
  40.         </f7-list-item-cell>
  41.         <f7-list-item-cell class="width-auto flex-shrink-0">
  42.           <f7-icon ios="f7:circle_half" md="material:brightness_high"></f7-icon>
  43.         </f7-list-item-cell>
  44.       </f7-list-item>
  45.     </f7-list>
  47.     <f7-block-title class="display-flex justify-content-space-between">Price Filter <span>${{priceMin}} - ${{priceMax}}</span></f7-block-title>
  48.     <f7-list simple-list>
  49.       <f7-list-item>
  50.         <f7-list-item-cell class="width-auto flex-shrink-0">
  51.           <f7-icon ios="f7:circle" md="material:brightness_low"></f7-icon>
  52.         </f7-list-item-cell>
  53.         <f7-list-item-cell class="flex-shrink-3">
  54.           <f7-range
  55.             :min="0"
  56.             :max="500"
  57.             :step="1"
  58.             :value="[priceMin, priceMax]"
  59.             :label="true"
  60.             :dual="true"
  61.             color="green"
  62.             @range:change="onPriceChange"
  63.           ></f7-range>
  64.         </f7-list-item-cell>
  65.         <f7-list-item-cell class="width-auto flex-shrink-0">
  66.           <f7-icon ios="f7:circle_half" md="material:brightness_high"></f7-icon>
  67.         </f7-list-item-cell>
  68.       </f7-list-item>
  69.     </f7-list>
  70.   </f7-page>
  71. </template>
  73. <script>
  74.   export default {
  75.     data() {
  76.       return {
  77.         priceMin: 200,
  78.         priceMax: 400,
  79.       };
  80.     },
  81.     methods: {
  82.       onPriceChange(values) {
  83.         this.priceMin = values[0];
  84.         this.priceMax = values[1];
  85.       },
  86.     },
  87.   };
  88. </script>