Vue Formulate

# Slider

The sliders classification is given to the following types:

# Range

<FormulateInput
  label="How long do you think you’ll live?"
  type="range"
  name="range"
  min="0"
  max="100"
  value="45"
  validation="required|min:10|max:90"
  error-behavior="live"
/>

Input ranges can create a poor user experience because the value of the range is not displayed by default. By adding the prop show-value, Vue Formulate will expose the value of the range input next to the slider.

45

# Custom class keys

In addition to all global class keys following are available:

Key Default Description
rangeValue .formulate-input-element-range-value An element immediately after the <input> element containing the value of the range input. Only available when show-value is true.

← Text →