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>