Slider

A slider is an input control that allows users to adjust a single value or a value range along a defined linear scale. It provides a draggable handle mapped to a continuous or discrete interval.

import {SliderModule} from "@qualcomm-ui/angular/slider"

Usage

The slider component lets users select a single value or a range of values by moving one or two thumbs along a track. Sliders are ideal for adjusting settings such as volume, brightness, or selecting a numeric range.

Examples

Simple

Use the simple API to create a slider using minimal markup.

Choose a value

Some contextual help here

<q-slider
  class="sm:w-80"
  hint="Some contextual help here"
  label="Choose a value"
  [defaultValue]="[25]"
/>

Composite

Build with the composite API for granular control. This API requires you to provide each subcomponent, but gives you full control over the structure and layout.

Choose a value

Some contextual help here

<div class="sm:w-80" q-slider-root [defaultValue]="[25]">
  <label q-slider-label>Choose a value</label>
  <div q-slider-value-text></div>
  <div q-slider-control>
    <div q-slider-track>
      <div q-slider-range></div>
    </div>
    <div q-slider-thumb [index]="0">
      <input q-slider-hidden-input />
    </div>
  </div>
  <div q-slider-marker-group>
    @for (value of markers; track value) {
      <span q-slider-marker [value]="value">{{ value }}</span>
    }
  </div>
  <span q-slider-hint>Some contextual help here</span>
</div>

Min/Max/Step

Use min, max, and step to control the slider's value range and increments:

min: The minimum value of the slider (default is 0).
max: The maximum value of the slider (default is 100).
step: The increment/decrement step value (default is 1).

<q-slider
  class="sm:w-80"
  [defaultValue]="[50]"
  [max]="70"
  [min]="20"
  [step]="5"
/>

Origin

Use origin to control where the track is filled from for single-value sliders:

start: Fills from the start of the track to the thumb. Useful when the value represents an absolute value (default).
center: Fills from the center of the track to the thumb. Useful when the value represents an offset or relative value.
end: Fills from the end of the track to the thumb. Useful when the value represents an offset from the end.

Start (default)

Center

End

<q-slider
  class="sm:w-80"
  label="Start (default)"
  origin="start"
  [defaultValue]="[50]"
/>
<q-slider
  class="sm:w-80"
  label="Center"
  origin="center"
  [defaultValue]="[50]"
/>
<q-slider
  class="sm:w-80"
  label="End"
  origin="end"
  [defaultValue]="[50]"
/>

Use tooltip to display the slider's value in a tooltip rather than above the component.

<q-slider class="mt-3 sm:w-80" tooltip [defaultValue]="[25]" />

Display

You can customize the tooltip's content by using the composite API and passing a function to display on the q-slider-thumb-indicator component.

From 25%

To 65%

import {Component} from "@angular/core"

import {SliderModule} from "@qualcomm-ui/angular/slider"

@Component({
  imports: [SliderModule],
  selector: "slider-tooltip-display-demo",
  template: `
    <div class="mt-3 sm:w-80" q-slider-root [defaultValue]="[25, 65]">
      <div q-slider-control>
        <div q-slider-track>
          <div q-slider-range></div>
        </div>
        <div q-slider-thumb [index]="0">
          <input q-slider-hidden-input />
          <div q-slider-thumb-indicator [display]="displayFromTooltip"></div>
        </div>
        <div q-slider-thumb [index]="1">
          <input q-slider-hidden-input />
          <div q-slider-thumb-indicator [display]="displayToTooltip"></div>
        </div>
      </div>
      <q-slider-markers />
    </div>
  `,
})
export class SliderTooltipDisplayDemo {
  displayFromTooltip = (value: number) => `From ${value}%`
  displayToTooltip = (value: number) => `To ${value}%`
}

Markers

Track Markers

By default, the component generates 11 default marks based on the slider's min and max values. You can provide your own set using marks.

<q-slider
  class="sm:w-80"
  [defaultValue]="[30]"
  [marks]="[20, 30, 40, 50, 60, 70]"
  [max]="70"
  [min]="20"
/>

Side Markers

For more compact designs, you can display the min and max markers at the ends of the track using sideMarkers.

<q-slider
  class="sm:w-80"
  sideMarkers
  [defaultValue]="[30]"
  [max]="70"
  [min]="20"
/>

Range

Set value or defaultValue with two values to create a range slider.

20 - 50

<q-slider class="sm:w-80" [defaultValue]="[20, 50]" />

Minimum Steps Between Thumbs

To prevent overlapping thumbs, use minStepsBetweenThumbs to set a minimum distance between them.

20 - 50

<q-slider
  class="sm:w-80"
  [defaultValue]="[20, 50]"
  [minStepsBetweenThumbs]="10"
/>

Display

By default, range values are displayed separated by an em dash (—). You can customize this by passing a separator string or a function to display.

from 20 to 50

<q-slider class="sm:w-80" [defaultValue]="[20, 50]" [display]="display" />

Size

Set size to adjust the size of the thumbs. Available sizes are sm (small) and md (medium, default).

<q-slider class="sm:w-80" size="sm" [defaultValue]="[50]" />

Variant

Set variant to adjust the visual style of the slider. Available variants are neutral and primary (default).

<q-slider class="sm:w-80" variant="neutral" [defaultValue]="[50]" />

Hint

Use hint to add additional guidance or context to the user below the slider.

Additional context

<q-slider class="sm:w-80" hint="Additional context" [defaultValue]="[50]" />

Disabled

Use disabled to prevent user interaction.

<q-slider class="sm:w-80" disabled [defaultValue]="[50]" />

Focus Callback

The focusChanged output allows you to listen for focus events on the slider's thumbs.

25 - 75

currently focused: none

<div class="sm:w-80">
  <q-slider
    [defaultValue]="[25, 75]"
    (focusChanged)="onFocusChange($event)"
  />
  <output class="mt-4 block">
    currently focused:
    <strong>{{ currentOutput }}</strong>
  </output>
</div>

Value Callbacks

Use valueChanged or valueChangedEnd to monitor the value of the slider.

25 - 75

live value: 25, 75 final value: 25, 75

<div class="sm:w-80">
  <q-slider
    [defaultValue]="value"
    (valueChanged)="onValueChange($event)"
    (valueChangedEnd)="onValueChangeEnd($event)"
  />
  <output class="mt-4 block">
    live value:
    <strong>{{ value.join(", ") }}</strong>
  </output>
  <output class="mt-4 block">
    final value:
    <strong>{{ finalValue.join(", ") }}</strong>
  </output>
</div>

Forms

Template Forms

States

When using template forms, the disabled, readOnly, and invalid properties govern the interactive state of the control.

Disabled

Read only

Invalid

<q-slider disabled label="Disabled" [defaultValue]="[25]" />
<q-slider readOnly label="Read only" [defaultValue]="[25]" />
<q-slider invalid label="Invalid" [defaultValue]="[25]" />

Validation

This example shows a range slider where values must be at least 30 units apart.

<form
  #formRef="ngForm"
  class="flex flex-col gap-5 sm:w-80"
  (ngSubmit)="onSubmit(formRef)"
>
  <q-slider
    errorText="Range must be at least 30"
    hint="At least 30"
    label="Select a range"
    name="slider"
    [invalid]="isRangeTooSmall()"
    [(ngModel)]="value"
  />
  <button
    emphasis="primary"
    q-button
    size="sm"
    type="submit"
    variant="fill"
  >
    Submit
  </button>
</form>

Reactive Forms

State Guidelines

The disabled and invalid properties have no effect when using Reactive Forms. Use the equivalent Reactive Form bindings instead:

Disabled

30 - 70

Select a range

31 - 60

Range must be at least 30

disabledField = new FormControl([30, 70])
invalidField = new FormControl([31, 60], {
  validators: [minRangeValidator],
})

ngOnInit() {
  this.disabledField.disable()
  this.invalidField.markAsDirty()
}

Composite API and Shortcuts

The Slider component provides a composite API should you need more control over the slider's behavior and appearance.

Anatomy

The composite API is based on the following components and directives:

q-slider-root: The main component that wraps the slider subcomponents.
q-slider-label: The slider main label.
q-slider-valueText: The slider current value as text.
q-slider-control: The container for the thumb(s) and its track and range.
q-slider-track: The track along which the thumb(s) move.
q-slider-range: The filled portion of the track.
q-slider-thumbs component or q-slider-thumb + q-slider-hiddenInput: The draggable handle(s).
q-slider-thumb-indicator: The thumb tooltip.
q-slider-hint: The hint text below the slider.
q-slider-errorText: The error message below the slider.
q-slider-markers component or q-slider.MarkerGroup + q-slider.Marker: The markers along the track.

Thumbs

If you need more control over the thumbs, you can use the q-slider-thumb directive instead of the q-slider-thumbs shortcut component. Note that q-slider-thumbs automatically creates a range slider when the slider's value or defaultValue is set accordingly.

import {Component} from "@angular/core"
import {SliderModule} from "@qualcomm-ui/angular/slider"

@Component({
  imports: [SliderModule],
  selector: "range-slider",
  template: `
    <div q-slider-root [defaultValue]="[25, 50]">
      <div q-slider-value-text></div>
      <div q-slider-control>
        <div q-slider-track>
          <div q-slider-range></div>
        </div>
        <div q-slider-thumb [index]="0">
          <input q-slider-hidden-input />
        </div>
        <div q-slider-thumb [index]="1">
          <input q-slider-hidden-input />
        </div>
      </div>
    </div>
  `,
})
export class RangeSlider {}

Thumbs with tooltips

Setting tooltip on the q-slider-thumbs or q-slider-thumb component is the equivalent of the following composition:

import {Component} from "@angular/core"
import {SliderModule} from "@qualcomm-ui/angular/slider"

@Component({
  imports: [SliderModule],
  selector: "slider-with-tooltip",
  template: `
    <div q-slider-root [defaultValue]="[25, 65]">
      <div q-slider-control>
        <div q-slider-track>
          <div q-slider-range></div>
        </div>
        <div q-slider-thumb [index]="0">
          <input q-slider-hidden-input />
          <div q-slider-thumb-indicator></div>
        </div>
        <div q-slider-thumb [index]="1">
          <input q-slider-hidden-input />
          <div q-slider-thumb-indicator></div>
        </div>
      </div>
    </div>
  `,
})
export class SliderWithTooltip {}

Markers

The q-slider-markers component is a convenient shortcut to display custom track markers. But you can also create your own markers using the q-slider-marker-group and q-slider-marker directives.

import {Component} from "@angular/core"

import {SliderModule} from "@qualcomm-ui/angular/slider"

@Component({
  imports: [SliderModule],
  selector: "slider-with-custom-markers",
  template: `
    <div q-slider-root [defaultValue]="[25, 50]">
      <div q-slider-value-text></div>
      <div q-slider-control>
        <div q-slider-track>
          <div q-slider-range></div>
        </div>
        <q-slider-thumbs />
      </div>
      <div q-slider-marker-group>
        <span q-slider-marker [value]="0">0</span>
        <span q-slider-marker [value]="25">25</span>
        <span q-slider-marker [value]="50">50</span>
        <span q-slider-marker [value]="75">75</span>
        <span q-slider-marker [value]="100">100</span>
      </div>
    </div>
  `,
})
export class SliderWithCustomMarkers {}

Explorer

Component Anatomy

Hover to highlight, click to view API

root label value-text control track range thumb marker-group marker hint error-text

API

q-slider

The q-slider component extends the q-slider-root directive with the following props:

Prop	Type	Default
display How to display range values: a separator string or a function that receives the value array and returns a string.	\| string \| (( value: number[], ) => string)	'—'
errorText The error message to display when the slider value is invalid.	string
hint Optional hint text to display below the slider.	string
label The label text for the slider.	string
marks The list of marks to display along the slider track.	number[]
sideMarkers Whether to display markers on the sides of the slider.	boolean
tooltip Whether to display the thumb value as a tooltip.	boolean

display

Type

| string
| ((
    value: number[],
  ) => string)

Description

How to display range values: a separator string or a function that receives the value array and returns a string.

errorText

Type

string

Description

The error message to display when the slider value is invalid.

hint

Type

string

Description

Optional hint text to display below the slider.

label

Type

string

Description

The label text for the slider.

marks

Type

number[]

Description

The list of marks to display along the slider track.

sideMarkers

Type

boolean

Description

Whether to display markers on the sides of the slider.

tooltip

Type

boolean

Description

Whether to display the thumb value as a tooltip.

Composite API

q-slider-root

Prop	Type	Default
aria-label The aria-label of each slider thumb. Useful for providing an accessible name to the slider	\| string \| string[]
aria-labelledby The `id` of the elements that labels each slider thumb. Useful for providing an accessible name to the slider	\| string \| string[]
defaultValue The initial value of the input when rendered. Use when you don't need to control the value of the input. This property will be ignored if you opt into controlled state via form control bindings.	InputSigna
dir The document's text/writing direction.	'ltr' \| 'rtl'
disabled Controls whether the input is disabled in template-driven forms. When true, prevents user interaction and applies visual styling to indicate the disabled state.	boolean
getAriaValueText Function that returns a human readable value for the slider thumb	(details: { index: number value: number }) => string
getRootNode A root node to correctly resolve the Document in custom environments. i.e., Iframes, Electron.	() => \| Node \| ShadowRoot \| Document
id HTML id attribute. If omitted, a unique identifier will be generated for accessibility.)	string
invalid Controls the visual error state of the input. When true, applies semantic error styling to indicate validation failure.	boolean
max The maximum value of the slider	number	100
min The minimum value of the slider	number	0
minStepsBetweenThumbs The minimum permitted steps between multiple thumbs. `minStepsBetweenThumbs` * `step` should reflect the gap between the thumbs. - `step: 1` and `minStepsBetweenThumbs: 10` => gap is `10` - `step: 10` and `minStepsBetweenThumbs: 2` => gap is `20`	number	0
name The name of the input field. Useful for form submission.	string
orientation The orientation of the slider	\| 'horizontal' \| 'vertical'	"horizontal"
origin The origin of the slider range. The track is filled from the origin to the thumb for single values. - "start": Useful when the value represents an absolute value - "center": Useful when the value represents an offset (relative) - "end": Useful when the value represents an offset from the end	\| 'start' \| 'end' \| 'center'	"start"
readOnly Whether the input is read-only. When true, prevents user interaction while keeping the input focusable and visible.	boolean
required Controls whether the input is required in template-driven forms. When true, the input must have a value for form validation to pass.	boolean
size The size of the slider.	'sm' \| 'md'
step The step value of the slider	number	1
thumbAlignment The alignment of the slider thumb relative to the track - `center`: the thumb will extend beyond the bounds of the slider track. - `contain`: the thumb will be contained within the bounds of the track.	\| 'contain' \| 'center'	"contain"
thumbSize The slider thumbs dimensions	{ height: number width: number }
variant The variant of the slider.	\| 'primary' \| 'neutral'
(focusChanged) Function invoked when the slider focus changes	{ focusedNode: T focusedValue: string }
(valueChanged) Value change callback.	{ value: number[] }
(valueChangedEnd) Function invoked when the slider value change is done	{ value: number[] }

aria-label

Type

| string
| string[]

Description

The aria-label of each slider thumb. Useful for providing an accessible name to the slider

aria-labelledby

Type

| string
| string[]

Description

The id of the elements that labels each slider thumb. Useful for providing an accessible name to the slider

defaultValue

Type

InputSigna

Description

The initial value of the input when rendered. Use when you don't need to control the value of the input. This property will be ignored if you opt into controlled state via form control bindings.

dir

Type

'ltr' | 'rtl'

Description

The document's text/writing direction.

disabled

Type

boolean

Description

Controls whether the input is disabled in template-driven forms. When true, prevents user interaction and applies visual styling to indicate the disabled state.

getAriaValueText

Type

(details: {
  index: number
  value: number
}) => string

Description

Function that returns a human readable value for the slider thumb

getRootNode

Type

() =>
| Node
| ShadowRoot
| Document

Description

A root node to correctly resolve the Document in custom environments. i.e., Iframes, Electron.

Type

string

Description

HTML id attribute. If omitted, a unique identifier will be generated for accessibility.)

invalid

Type

boolean

Description

Controls the visual error state of the input. When true, applies semantic error styling to indicate validation failure.

max

Type

number

Description

The maximum value of the slider

min

Type

number

Description

The minimum value of the slider

minStepsBetweenThumbs

Type

number

Description

The minimum permitted steps between multiple thumbs.

minStepsBetweenThumbs * step should reflect the gap between the thumbs.

- step: 1 and minStepsBetweenThumbs: 10 => gap is 10
- step: 10 and minStepsBetweenThumbs: 2 => gap is 20

name

Type

string

Description

The name of the input field. Useful for form submission.

orientation

Type

| 'horizontal'
| 'vertical'

Description

The orientation of the slider

origin

Type

| 'start'
| 'end'
| 'center'

Description

The origin of the slider range. The track is filled from the origin to the thumb for single values.
- "start": Useful when the value represents an absolute value
- "center": Useful when the value represents an offset (relative)
- "end": Useful when the value represents an offset from the end

readOnly

Type

boolean

Description

Whether the input is read-only. When true, prevents user interaction while keeping the input focusable and visible.

required

Type

boolean

Description

Controls whether the input is required in template-driven forms. When true, the input must have a value for form validation to pass.

size

Type

'sm' | 'md'

Description

The size of the slider.

step

Type

number

Description

The step value of the slider

thumbAlignment

Type

| 'contain'
| 'center'

Description

The alignment of the slider thumb relative to the track
- center: the thumb will extend beyond the bounds of the slider track.
- contain: the thumb will be contained within the bounds of the track.

thumbSize

Type

{
  height: number
  width: number
}

Description

The slider thumbs dimensions

variant

Type

| 'primary'
| 'neutral'

Description

The variant of the slider.

(focusChanged)

Type

{
  focusedNode: T
  focusedValue: string
}

Description

Function invoked when the slider focus changes

(valueChanged)

Type

{
  value: number[]
}

Description

Value change callback.

(valueChangedEnd)

Type

{
  value: number[]
}

Description

Function invoked when the slider value change is done

Attribute / Property	Value
`data-disabled`
`data-dragging`
`data-focus`
`data-invalid`
`data-orientation`	Orientation
`data-readonly`
`data-slider-part`	'root'
`style`	CSSProperties

data-disabled

Value

data-dragging

Value

data-focus

Value

data-invalid

Value

data-orientation

Value

Orientation

data-readonly

Value

data-slider-part

Value

'root'

style

Value

CSSProperties

q-slider-label

Prop	Type
id id attribute. If omitted, a unique identifier will be generated for accessibility.	string

Type

string

Description

id attribute. If omitted, a unique identifier will be generated for accessibility.

Attribute / Property	Value
`data-disabled`
`data-dragging`
`data-focus`
`data-invalid`
`data-orientation`	Orientation
`data-readonly`
`data-slider-part`	'label'
`style`	CSSProperties

data-disabled

Value

data-dragging

Value

data-focus

Value

data-invalid

Value

data-orientation

Value

Orientation

data-readonly

Value

data-slider-part

Value

'label'

style

Value

CSSProperties

q-slider-value-text

Prop	Type	Default
display How to display range values: a separator string or a function that receives the value array and returns a string.	\| string \| (( value: number[], ) => string)	' - '
id id attribute. If omitted, a unique identifier will be generated for accessibility.	string

display

Type

| string
| ((
    value: number[],
  ) => string)

Description

How to display range values: a separator string or a function that receives the value array and returns a string.

Type

string

Description

id attribute. If omitted, a unique identifier will be generated for accessibility.

Attribute / Property	Value
`data-disabled`
`data-focus`
`data-invalid`
`data-orientation`	Orientation
`data-readonly`
`data-slider-part`	'value-text'

data-disabled

Value

data-focus

Value

data-invalid

Value

data-orientation

Value

Orientation

data-readonly

Value

data-slider-part

Value

'value-text'

q-slider-control

Prop	Type
id id attribute. If omitted, a unique identifier will be generated for accessibility.	string

Type

string

Description

id attribute. If omitted, a unique identifier will be generated for accessibility.

Attribute / Property	Value
`data-disabled`
`data-dragging`
`data-focus`
`data-invalid`
`data-orientation`	Orientation
`data-readonly`
`data-slider-part`	'control'
`style`	CSSProperties

data-disabled

Value

data-dragging

Value

data-focus

Value

data-invalid

Value

data-orientation

Value

Orientation

data-readonly

Value

data-slider-part

Value

'control'

style

Value

CSSProperties

q-slider-track

Prop	Type
id id attribute. If omitted, a unique identifier will be generated for accessibility.	string

Type

string

Description

id attribute. If omitted, a unique identifier will be generated for accessibility.

Attribute / Property	Value
`data-disabled`
`data-dragging`
`data-focus`
`data-invalid`
`data-orientation`	Orientation
`data-readonly`
`data-slider-part`	'track'
`style`	CSSProperties

data-disabled

Value

data-dragging

Value

data-focus

Value

data-invalid

Value

data-orientation

Value

Orientation

data-readonly

Value

data-slider-part

Value

'track'

style

Value

CSSProperties

q-slider-range

Prop	Type
id id attribute. If omitted, a unique identifier will be generated for accessibility.	string

Type

string

Description

id attribute. If omitted, a unique identifier will be generated for accessibility.

Attribute / Property	Value
`data-disabled`
`data-dragging`
`data-focus`
`data-invalid`
`data-orientation`	Orientation
`data-readonly`
`data-slider-part`	'range'
`style`	CSSProperties

data-disabled

Value

data-dragging

Value

data-focus

Value

data-invalid

Value

data-orientation

Value

Orientation

data-readonly

Value

data-slider-part

Value

'range'

style

Value

CSSProperties

q-slider-thumbs shortcut

Prop	Type
tooltip Whether to display the thumb value as a tooltip.	boolean

tooltip

Type

boolean

Description

Whether to display the thumb value as a tooltip.

q-slider-thumb

Prop	Type
index ^* The slider thumb's index.	number
id id attribute. If omitted, a unique identifier will be generated for accessibility.	string
name The name associated with the slider thumb's input (when used in a form).	string

index

Type

number

Description

The slider thumb's index.

Type

string

Description

id attribute. If omitted, a unique identifier will be generated for accessibility.

name

Type

string

Description

The name associated with the slider thumb's input (when used in a form).

Attribute / Property	Value
`data-disabled`
`data-dragging`
`data-focus`
`data-index`	number
`data-name`	string
`data-orientation`	Orientation
`data-readonly`
`data-slider-part`	'thumb'
`style`	CSSProperties
`tabIndex`	number

data-disabled

Value

data-dragging

Value

data-focus

Value

data-index

Value

number

data-name

Value

string

data-orientation

Value

Orientation

data-readonly

Value

data-slider-part

Value

'thumb'

style

Value

CSSProperties

tabIndex

Value

number

q-slider-thumb-indicator

Prop	Type	Default
display Custom value display: a function that receives the value and returns a string.	( value: number, ) => string	' - '
id id attribute. If omitted, a unique identifier will be generated for accessibility.	string

display

Type

(
  value: number,
) => string

Description

Custom value display: a function that receives the value and returns a string.

Type

string

Description

id attribute. If omitted, a unique identifier will be generated for accessibility.

Attribute / Property	Value
`data-orientation`	Orientation
`data-slider-part`	'thumb-indicator'
`style`	CSSProperties

q-slider-hidden-input

Prop	Type
id id attribute. If omitted, a unique identifier will be generated for accessibility.	string

Type

string

Description

id attribute. If omitted, a unique identifier will be generated for accessibility.

Attribute / Property	Value
`hidden`	boolean

q-slider-markers shortcut

Prop	Type
marks An array of numbers indicating where to place the markers. If not provided, the component will generate 11 evenly spaced markers based on the `min` and `max` slider values.	number[]

marks

Type

number[]

Description

An array of numbers indicating where to place the markers. If not provided, the component will generate 11 evenly spaced markers based on the min and max slider values.

q-slider-marker-group

Prop	Type
id id attribute. If omitted, a unique identifier will be generated for accessibility.	string

Type

string

Description

id attribute. If omitted, a unique identifier will be generated for accessibility.

Attribute / Property	Value
`data-orientation`	Orientation
`data-slider-part`	'marker-group'
`style`	CSSProperties

q-slider-marker

Prop	Type
value ^* The value the marker should indicate.	number
id id attribute. If omitted, a unique identifier will be generated for accessibility.	string

value

Type

number

Description

The value the marker should indicate.

Type

string

Description

id attribute. If omitted, a unique identifier will be generated for accessibility.

Attribute / Property	Value
`data-disabled`
`data-orientation`	Orientation
`data-readonly`
`data-slider-part`	'marker'
`data-state`	\| 'over-value' \| 'under-value' \| 'at-value'
`data-value`	number
`style`	CSSProperties

data-disabled

Value

data-orientation

Value

Orientation

data-readonly

Value

data-slider-part

Value

'marker'

data-state

Value

| 'over-value'
| 'under-value'
| 'at-value'

data-value

Value

number

style

Value

CSSProperties

q-slider-hint

Prop	Type
id id attribute. If omitted, a unique identifier will be generated for accessibility.	string

Type

string

Description

id attribute. If omitted, a unique identifier will be generated for accessibility.

Attribute / Property	Value
`data-disabled`
`data-dragging`
`data-invalid`
`data-orientation`	Orientation
`data-readonly`
`data-slider-part`	'hint'
`hidden`	boolean

data-disabled

Value

data-dragging

Value

data-invalid

Value

data-orientation

Value

Orientation

data-readonly

Value

data-slider-part

Value

'hint'

hidden

Value

boolean

q-slider-error-text

Prop	Type	Default
icon Error indicator icon.	\| LucideIconData \| string	CircleAlert
id id attribute. If omitted, a unique identifier will be generated for accessibility.	string

icon

Type

| LucideIconData
| string

Description

Error indicator icon.

Type

string

Description

id attribute. If omitted, a unique identifier will be generated for accessibility.

Attribute / Property	Value
`data-disabled`
`data-dragging`
`data-invalid`
`data-orientation`	Orientation
`data-slider-part`	'error-text'
`hidden`	boolean

data-disabled

Value

data-dragging

Value

data-invalid

Value

data-orientation

Value

Orientation

data-slider-part

Value

'error-text'

hidden

Value

boolean

Last updated on Apr 24, 2026 by Olaf Kappes

Side Nav

Stepper