Input Slider

Overview

InputSlider is the range slider used by numeric inputs and range filters. The shape of defaultValue decides the mode: a single-element array gives one thumb (single-value slider); a two-element array gives two thumbs (min/max range). Both share the same min, max, and step bounds, so consumer state always lines up with what the slider can produce.

Useful when:

• you need a quick numeric input that benefits from drag interaction (volume, quantity, intensity);
• you're driving a price, size, or rating filter where the two-thumb range is the right affordance;
• you want a value-label affordance — set valueLabel="auto" to show the value only while dragging, or valueLabel="always" to keep it visible.

Switch to orientation="vertical" for sliders that read top-to-bottom (column controls, vertical filter panels). step snaps the value to integer multiples, so set it to match the catalog's price grain or size grid.

InputSlider is Field-aware: inherit disabled and invalid from a surrounding <LField> instead of prop-drilling.

Usage

Single thumb

<InputSlider v-model="volume" :default-value="[50]" :min="0" :max="100" :step="1" />

Range (two thumbs)

<InputSlider
  v-model="priceRange"
  :default-value="[20, 80]"
  :min="0"
  :max="100"
  :step="1"
/>

With format label

Use formatLabel to render the value in a localized currency, percentage, or unit format.

<InputSlider
  v-model="price"
  :default-value="[42]"
  :min="0"
  :max="100"
  :format-label="(v) => `$${v}`"
  value-label="always"
/>

Vertical

<InputSlider v-model="value" :default-value="[40]" orientation="vertical" />

Feature List

API Reference