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
disabled boolean false Defines whether the toggle input is disabled or not

Range Slider Events

Event Description
<f7-range> events
range:change Event will be triggered when Range Slider value has been changed

Range Slider Methods

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

Examples

<!-- Default -->
<f7-range
  :min="0"
  :max="100"
  :step="1"
  :value="10"
></f7-range>

<!-- Enable labels + color -->
<f7-range
  :min="0"
  :max="100"
  :step="1"
  :value="50"
  :label="true"
  color="orange"
></f7-range>

<!-- Dual -->
<f7-range
  :min="0"
  :max="500"
  :step="1"
  :value="[100, 500]"
  :label="true"
  :dual="true"
  color="green"
></f7-range>