Range Slider Vue Component

Range Slider Components
Range Slider Properties
Range Slider Events
Stepper v-model
Examples

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

Stepper v-model

f7-range component supports v-model on value prop:

<template>
  <p>Value is {{ count }}</p>
  ...
  <f7-range
    :min="0"
    :max="100"
    :step="1"
    v-model:value="count"
  />
  ...
</template>
<script>
  export default {
    data() {
      count: 50,
    },
    ...
  };
</script>

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="flex-shrink-0"
        :style="{ width: theme.ios ? '28px' : theme.md ? '24px' : '18px' }"
      >
        <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-list-item-cell>
      <f7-list-item-cell
        class="flex-shrink-0"
        :style="{ width: theme.ios ? '28px' : theme.md ? '24px' : '18px' }"
      >
        <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="flex-shrink-0"
        :style="{ width: theme.ios ? '28px' : theme.md ? '24px' : '18px' }"
      >
        <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-list-item-cell>
      <f7-list-item-cell
        class="flex-shrink-0"
        :style="{ width: theme.ios ? '28px' : theme.md ? '24px' : '18px' }"
      >
        <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="flex-shrink-0"
        :style="{ width: theme.ios ? '28px' : theme.md ? '24px' : '18px' }"
      >
        <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-list-item-cell>
      <f7-list-item-cell
        class="flex-shrink-0"
        :style="{ width: theme.ios ? '28px' : theme.md ? '24px' : '18px' }"
      >
        <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-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
      class="margin-horizontal"
      style="height: 160px"
      :vertical="true"
      :min="0"
      :max="100"
      :label="true"
      :step="1"
      :value="50"
    />
    <f7-range
      class="margin-horizontal"
      style="height: 160px"
      :vertical="true"
      :min="0"
      :max="100"
      :label="true"
      :step="1"
      :value="75"
    />
    <f7-range
      class="margin-left"
      style="height: 160px"
      :dual="true"
      :vertical="true"
      :min="0"
      :max="100"
      :label="true"
      :step="1"
      :value="[25, 75]"
    />
  </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
      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
      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
      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-block>
</f7-page>
</template>
<script>
import { theme } from 'framework7-vue';

export default {
  data() {
    return {
      theme,
      priceMin: 200,
      priceMax: 400,
    };
  },
  methods: {
    onPriceChange(values) {
      this.priceMin = values[0];
      this.priceMax = values[1];
    },
  },
};
</script>