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
1Minimal step between values
labelbooleanfalseEnables additional label around range slider knob
dualbooleanfalseEnables dual range slider
verticalbooleanfalseEnables vertical range slider
vertical-reversedbooleanfalseMakes vertical range slider reversed. (Only when vertical:true)
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
scalebooleanfalseEnables range slider scale
scale-stepsnumber5Number of scale steps
scale-sub-stepsnumber0Number of scale sub steps (each step will be divided by this value)
format-scale-labelfunction (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-positionbooleanLimits knob position to the size of the range bar. By default enabled from iOS theme
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
namestringInput element "name" 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

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>