Components

SliderField

Form field wrapper around Slider with label, min/max labels, validation, and error handling.

Component

View code

Show playground

Price range (optional)$20 USD - $80 USD

Min: $0 USDMax: $100 USD

Pick your preferred range

Props

Props	Required	Default	Type
`id`	`true`	—	`string`
`label`	—	—	`string`
`helpText`	—	—	`string`
`helpTextPosition`	—	`Position.BOTTOM`	`Position`
`required`	—	`false`	`boolean`
`showOptionalLabel`	—	`true`	`boolean`
`optionalLabel`	—	—	`string`
`modelValue`	—	`0`	`number \| [number, number]`
`type`	—	`SliderType.SINGLE`	`SliderType`
`color`	—	`ColorAccent.NEUTRAL`	`ColorAccent`
`size`	—	`SliderSize.MD`	`SliderSize`
`step`	—	`1`	`number`
`min`	—	`0`	`number`
`max`	—	`100`	`number`
`multiple`	—	`false`	`boolean`
`orientation`	—	`Orientation.HORIZONTAL`	`Orientation`
`hasTooltip`	—	`false`	`boolean`
`showInputs`	—	`false`	`boolean`
`showInputsLabel`	—	`false`	`boolean`
`inputPosition`	—	`Position.BOTTOM`	`Position`
`disabled`	—	`false`	`boolean`
`borderRadius`	—	—	`number`
`minText`	—	`'Min: '`	`string`
`maxText`	—	`'Max: '`	`string`
`currentValuePrefix`	—	—	`string`
`currentValueSuffix`	—	—	`string`
`validator`	—	`null`	`function`
`error`	—	`''`	`string`
`transparentInputs`	—	`false`	`boolean`

Usage

id

Sets the field identifier.

 <template>
    <SliderField id="price-range" />
</template>

Type: string
Required: true

label

Sets field label.

 <template>
    <SliderField id="price-range" label="Price" />
</template>

Type: string

helpText

Sets helper text below the field.

 <template>
    <SliderField id="price-range" helpText="Choose a valid range." />
</template>

Type: string

helpTextPosition

Sets the position of the help text relative to the field. It uses the Position enum.

 <template>
    <SliderField id="price-range" helpTextPosition="top" helpText="Appears above the field" />
</template>

Type: Position
Default: Position.BOTTOM

Options

Value	Description
`TOP`	top
`BOTTOM`	bottom

required

Marks the field as required for validation.

 <template>
    <SliderField id="price-range" required />
</template>

Type: boolean
Default: false

showOptionalLabel

When the field is not required, shows an "(optional)" hint next to the label. Set to false to hide it. The hint text defaults to a global setting that can be overridden project-wide, and can also be overridden per field with the optionalLabel prop.

 <template>
    <SliderField id="price-range" label="Price" :showOptionalLabel="false" />
</template>

Type: boolean
Default: true

optionalLabel

Overrides the "(optional)" hint text for this specific field, taking priority over the global default.

 <template>
    <SliderField id="price-range" label="Price" optionalLabel="(not required)" />
</template>

Type: string

modelValue

Sets the current value (single or range).

 <template>
    <SliderField id="price-range" v-model="value" />
</template>

<script setup lang="ts">
const value = ref<[number, number]>([20, 80])
</script>

Type: number | [number, number]
Default: 0

type

Sets slider mode.

 <template>
    <SliderField id="price-range" :type="SliderType.RANGE" />
</template>

Type: SliderType
Default: SliderType.SINGLE

color

Sets accent color.

 <template>
    <SliderField id="price-range" :color="ColorAccent.PRIMARY_BRAND" />
</template>

Type: ColorAccent
Default: ColorAccent.NEUTRAL

size

Sets slider size variant.

 <template>
    <SliderField id="price-range" :size="SliderSize.LG" />
</template>

Type: SliderSize
Default: SliderSize.MD

step

Sets numeric increment.

 <template>
    <SliderField id="price-range" :step="5" />
</template>

Important

Use a dividable step value that fits within the min-max range to ensure the slider functions correctly.

Type: number
Default: 1

min

Sets minimum value.

 <template>
    <SliderField id="price-range" :min="10" />
</template>

Type: number
Default: 0

max

Sets maximum value.

 <template>
    <SliderField id="price-range" :max="250" />
</template>

Type: number
Default: 100

multiple

Enables range behavior when using array values.

 <template>
    <SliderField id="price-range" multiple v-model="range" />
</template>

<script setup lang="ts">
const range = ref<[number, number]>([30, 70])
</script>

Type: boolean
Default: false

orientation

Sets horizontal or vertical direction.

 <template>
    <SliderField id="price-range" :orientation="Orientation.VERTICAL" />
</template>

Type: Orientation
Default: Orientation.HORIZONTAL

hasTooltip

Shows value tooltips on thumbs.

 <template>
    <SliderField id="price-range" hasTooltip />
</template>

Type: boolean
Default: false

showInputs

Displays InputField controls for exact numeric entry.

 <template>
    <SliderField id="price-range" showInputs />
</template>

Type: boolean
Default: false

showInputsLabel

Displays labels for the exact-value input controls.

 <template>
    <SliderField id="price-range" showInputs :showInputsLabel="true" />
</template>

Type: boolean
Default: false

inputPosition

Sets whether exact-value inputs render above or below slider.

 <template>
    <SliderField id="price-range" showInputs :inputPosition="Position.TOP" />
</template>

Type: Position
Default: Position.BOTTOM

disabled

Disables field interaction.

 <template>
    <SliderField id="price-range" disabled />
</template>

Type: boolean
Default: false

borderRadius

Overrides default rounded classes with a numeric radius in pixels.

 <template>
    <SliderField id="price-range" :borderRadius="8" />
</template>

Type: number
Default: undefined

minText

Sets prefix label for minimum helper value.

 <template>
    <SliderField id="price-range" minText="Minimum: " />
</template>

Type: string
Default: 'Min: '

maxText

Sets prefix label for maximum helper value.

 <template>
    <SliderField id="price-range" maxText="Maximum: " />
</template>

Type: string
Default: 'Max: '

currentValuePrefix

Sets prefix for displayed current value.

 <template>
    <SliderField id="price-range" currentValuePrefix="$" />
</template>

Type: string

currentValueSuffix

Sets suffix for displayed current value.

 <template>
    <SliderField id="price-range" currentValueSuffix=" USD" />
</template>

Type: string

validator

Sets custom validator function.

 <template>
    <SliderField id="price-range" :validator="validateRange" />
</template>

Type: function
Default: null

error (v-model:error)

Sets the error message of the field. This prop is bindable via v-model:error, allowing two-way syncing of the validation state.

 <template>
    <SliderField id="price-range" v-model:error="error" />
</template>

<script setup lang="ts">
const error = ref('')
</script>

Type: string
Default: ''

transparentInputs

When true, passes transparent to all child InputField components, removing their default background.

 <template>
    <SliderField id="price-range" showInputs transparentInputs />
</template>

Type: boolean
Default: false