Slider

An easily stylable range input.

<script lang="ts">
	import { Slider } from '@sveltery/base/slider';
</script>

<Slider.Root defaultValue={25}>
	<Slider.Control class="flex w-56 touch-none items-center py-3 select-none">
		<Slider.Track class="h-1 w-full bg-neutral-200 select-none dark:bg-neutral-800">
			<Slider.Indicator class="bg-neutral-950 select-none dark:bg-white" />
			<Slider.Thumb
				aria-label="Volume"
				class="size-4 border border-neutral-950 bg-white select-none has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-neutral-950 dark:has-[:focus-visible]:outline-white dark:border-white dark:bg-neutral-950"
			/>
		</Slider.Track>
	</Slider.Control>
</Slider.Root>

Usage guidelines

Form controls must have an accessible name: Prefer <Slider.Label>, or provide an aria-label on each <Slider.Thumb> when no visible label is rendered. See Labeling a slider and the forms guide.

Anatomy

Import the component and assemble its parts:

Anatomy

<script lang="ts">
	import { Slider } from '@sveltery/base/slider';
</script>

<Slider.Root>
	<Slider.Label />
	<Slider.Value />
	<Slider.Control>
		<Slider.Track>
			<Slider.Indicator />
			<Slider.Thumb />
		</Slider.Track>
	</Slider.Control>
</Slider.Root>

Examples

Labeling a slider

A single-thumb slider without a visible label (such as a volume control) can be labeled using aria-label on <Slider.Thumb>:

Slider with invisible label

<Slider.Root>
	<Slider.Control>
		<Slider.Track>
			<Slider.Indicator />
			<Slider.Thumb aria-label="Volume" />
		</Slider.Track>
	</Slider.Control>
</Slider.Root>

A visible label can be created using <Slider.Label>:

Slider with visible label

<Slider.Root>
	<Slider.Label>Volume</Slider.Label>
	<Slider.Control>
		<Slider.Track>
			<Slider.Indicator />
			<Slider.Thumb />
		</Slider.Track>
	</Slider.Control>
</Slider.Root>

For a multi-thumb range slider with a visible label, add aria-label on each <Slider.Thumb> to distinguish them:

Labeling multi-thumb range sliders

<Slider.Root defaultValue={[25, 75]}>
	<Slider.Label>Price range</Slider.Label>
	<Slider.Control>
		<Slider.Track>
			<Slider.Indicator />
			<Slider.Thumb index={0} aria-label="Minimum price" />
			<Slider.Thumb index={1} aria-label="Maximum price" />
		</Slider.Track>
	</Slider.Control>
</Slider.Root>

Range slider

To create a range slider:

Pass an array of values and place a <Slider.Thumb> for each value in the array
Additionally for server-side rendering, specify a numeric index for each thumb that corresponds to the index of its value in the value array

Thumbs can be configured to behave differently when they collide during pointer interactions using the thumbCollisionBehavior prop on <Slider.Root>.

<script lang="ts">
	import { Slider } from '@sveltery/base/slider';
</script>

<Slider.Root defaultValue={[25, 45]}>
	<Slider.Control class="flex w-56 touch-none items-center py-3 select-none">
		<Slider.Track class="h-1 w-full bg-neutral-200 select-none dark:bg-neutral-800">
			<Slider.Indicator class="bg-neutral-950 select-none dark:bg-white" />
			<Slider.Thumb
				index={0}
				aria-label="Minimum value"
				class="size-4 border border-neutral-950 bg-white select-none has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-neutral-950 dark:has-[:focus-visible]:outline-white dark:border-white dark:bg-neutral-950"
			/>
			<Slider.Thumb
				index={1}
				aria-label="Maximum value"
				class="size-4 border border-neutral-950 bg-white select-none has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-neutral-950 dark:has-[:focus-visible]:outline-white dark:border-white dark:bg-neutral-950"
			/>
		</Slider.Track>
	</Slider.Control>
</Slider.Root>

Steps

Use the step prop to snap the value to multiples of a given increment, and largeStep to control the increment when using Page Up/Page Down or Shift + Arrow Up/Arrow Down.

Playback speed

400

<script lang="ts">
	import { Slider } from '@sveltery/base/slider';
</script>

<Slider.Root
	class="grid w-56 grid-cols-2"
	defaultValue={400}
	min={100}
	max={900}
	step={100}
	largeStep={200}
>
	<Slider.Label class="cursor-default text-sm text-neutral-950 dark:text-white">
		Playback speed
	</Slider.Label>
	<Slider.Value class="text-end text-sm text-neutral-950 dark:text-white" />
	<Slider.Control class="col-span-2 flex touch-none items-center py-3 select-none">
		<Slider.Track class="h-1 w-full bg-neutral-200 select-none dark:bg-neutral-800">
			<Slider.Indicator class="bg-neutral-950 select-none dark:bg-white" />
			<Slider.Thumb
				class="size-4 border border-neutral-950 bg-white select-none has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-neutral-950 dark:has-[:focus-visible]:outline-white dark:border-white dark:bg-neutral-950"
			/>
		</Slider.Track>
	</Slider.Control>
</Slider.Root>

Marks

Render your own tick marks, positioning each mark along the track as a percentage of the value range.

<script lang="ts">
	import { Slider } from '@sveltery/base/slider';

	const MIN = 0;
	const MAX = 100;
	const MARKS = [0, 25, 50, 75, 100];

	function valueToPercent(value: number) {
		return ((value - MIN) / (MAX - MIN)) * 100;
	}
</script>

<Slider.Root class="w-56" defaultValue={40} min={MIN} max={MAX}>
	<Slider.Control class="flex touch-none items-center py-2.5 select-none">
		<Slider.Track class="h-1 w-full bg-neutral-200 select-none dark:bg-neutral-800">
			<Slider.Indicator class="bg-neutral-950 select-none dark:bg-white" />
			{#each MARKS as mark (mark)}
				<div
					aria-hidden="true"
					class="absolute top-1/2 h-2 w-px -translate-x-1/2 -translate-y-1/2 bg-neutral-950 dark:bg-white"
					style:left="{valueToPercent(mark)}%"
				></div>
			{/each}
			<Slider.Thumb
				aria-label="Volume"
				class="size-4 border border-neutral-950 bg-white select-none has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-neutral-950 dark:has-[:focus-visible]:outline-white dark:border-white dark:bg-neutral-950"
			/>
		</Slider.Track>
	</Slider.Control>
	<div class="relative h-4 select-none" aria-hidden="true">
		{#each MARKS as mark (mark)}
			<span
				class="absolute -translate-x-1/2 text-xs whitespace-nowrap text-neutral-600 dark:text-neutral-400"
				style:left="{valueToPercent(mark)}%"
			>
				{mark}
			</span>
		{/each}
	</div>
</Slider.Root>

Marks are independent of the value's granularity—pair them with the step prop to snap the thumb to each mark.

Set thumbAlignment="edge" to inset the thumb such that its edge aligns with the edge of the control when the value is at min or max, without overflowing the control like the default "center" alignment.

A client-only alternative thumbAlignment="edge-client-only" can be used to reduce bundle size but only renders after Svelte hydration.

<script lang="ts">
	import { Slider } from '@sveltery/base/slider';
</script>

<Slider.Root thumbAlignment="edge" defaultValue={25}>
	<Slider.Control class="flex w-56 touch-none items-center py-3 select-none">
		<Slider.Track class="h-1 w-full bg-neutral-200 select-none dark:bg-neutral-800">
			<Slider.Indicator class="bg-neutral-950 select-none dark:bg-white" />
			<Slider.Thumb
				aria-label="Volume"
				class="size-4 border border-neutral-950 bg-white select-none has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-neutral-950 dark:has-[:focus-visible]:outline-white dark:border-white dark:bg-neutral-950"
			/>
		</Slider.Track>
	</Slider.Control>
</Slider.Root>

Vertical

Set orientation="vertical" on <Slider.Root> to build a vertical slider.

<script lang="ts">
	import { Slider } from '@sveltery/base/slider';
</script>

<Slider.Root orientation="vertical" defaultValue={35}>
	<Slider.Control
		class="flex touch-none select-none data-[orientation=vertical]:h-32 data-[orientation=vertical]:px-3"
	>
		<Slider.Track
			class="bg-neutral-200 select-none dark:bg-neutral-800 data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1"
		>
			<Slider.Indicator class="bg-neutral-950 select-none dark:bg-white" />
			<Slider.Thumb
				aria-label="Volume"
				class="size-4 border border-neutral-950 bg-white select-none has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-neutral-950 dark:has-[:focus-visible]:outline-white dark:border-white dark:bg-neutral-950"
			/>
		</Slider.Track>
	</Slider.Control>
</Slider.Root>

Form integration

To use a slider in a form, pass the slider name to <Slider.Root>:

Using Slider in a form

<Form>
	<Slider.Root name="volume">
		<Slider.Label>Volume</Slider.Label>
		<Slider.Control>
			<Slider.Track>
				<Slider.Indicator />
				<Slider.Thumb />
			</Slider.Track>
		</Slider.Control>
	</Slider.Root>
</Form>

For grouped multi-thumb range sliders in forms, Fieldset can provide the shared visible label while each thumb keeps its own aria-label:

Using Fieldset with a multi-thumb slider

<Field.Root>
	<Fieldset.Root>
		{#snippet render(props, state, children)}
			<Slider.Root {...props} defaultValue={[25, 75]}>
				{@render children?.()}
			</Slider.Root>
		{/snippet}
		<Fieldset.Legend>Price range</Fieldset.Legend>
		<Slider.Control>
			<Slider.Track>
				<Slider.Indicator />
				<Slider.Thumb index={0} aria-label="Minimum price" />
				<Slider.Thumb index={1} aria-label="Maximum price" />
			</Slider.Track>
		</Slider.Control>
	</Fieldset.Root>
</Field.Root>

API reference

Root

Groups all parts of the slider. Renders a <div> element.

defaultValue SliderValue —

Name: defaultValue
Description: The value an empty value starts from.
Type: SliderValue

disabled boolean | null false

Name: disabled
Description: Whether the slider should ignore user interaction.
Type: boolean | null
Default: false

format Intl.NumberFormatOptions —

Name: format
Description: Options to format the value.
Type: Intl.NumberFormatOptions

locale Intl.LocalesArgument —

Name: locale
Description: The locale used by Intl.NumberFormat when formatting the value. Defaults to the user's runtime locale.
Type: Intl.LocalesArgument

max number 100

Name: max
Description: The maximum allowed value of the slider. Should not be equal to min.
Type: number
Default: 100

min number 0

Name: min
Description: The minimum allowed value of the slider. Should not be equal to max.
Type: number
Default: 0

minStepsBetweenValues number 0

Name: minStepsBetweenValues
Description: The minimum steps between values in a range slider.
Type: number
Default: 0

name string | null —

Name: name
Description: Identifies the field when a form is submitted.
Type: string | null

form string | null —

Name: form
Description: Identifies the form that owns the slider inputs.
Type: string | null

orientation SliderOrientation 'horizontal'

Name: orientation
Description: The component orientation.
Type: SliderOrientation
Default: 'horizontal'

step number 1

Name: step
Description: The granularity with which the slider can step through values. The min prop serves as the origin for the valid values.
Type: number
Default: 1

largeStep number 10

Name: largeStep
Description: The granularity with which the slider can step through values when using Page Up/Page Down or Shift + Arrow Up/Arrow Down.
Type: number
Default: 10

thumbAlignment SliderThumbAlignment 'center'

Name: thumbAlignment
Description: How the thumb(s) are aligned relative to Slider.Control when the value is at min or max. edge-client-only matches edge after the client measures the thumb.
Type: SliderThumbAlignment
Default: 'center'

thumbCollisionBehavior SliderThumbCollisionBehavior 'push'

Name: thumbCollisionBehavior
Description: How thumbs behave when they collide during pointer interactions.
Type: SliderThumbCollisionBehavior
Default: 'push'

value SliderValue —

Name: value
Description: The value of the slider. For range sliders, provide an array with one value per thumb. bind:value shares it with the parent.
Type: SliderValue
Binding: bind:value

onValueChange function —

Name: onValueChange
Type: (value: SliderValue, eventDetails: SliderChangeEventDetails) => void

onValueCommitted function —

Name: onValueCommitted
Type: (value: SliderValue, eventDetails: SliderCommitEventDetails) => void

render Snippet<[props: HTMLAttributes<HTMLDivElement>, state: SliderRootState, children: Snippet | undefined]> —

Name: render
Type: Snippet<[props: HTMLAttributes<HTMLDivElement>, state: SliderRootState, children: Snippet | undefined]>

activeThumbIndex number

Name: activeThumbIndex
Description: The index of the active thumb.
Type: number

disabled boolean

Name: disabled
Description: Whether the component should ignore user interaction.
Type: boolean

dragging boolean

Name: dragging
Description: Whether the thumb is currently being dragged.
Type: boolean

max number

Name: max
Description: The maximum value.
Type: number

min number

Name: min
Description: The minimum value.
Type: number

minStepsBetweenValues number

Name: minStepsBetweenValues
Description: The minimum steps between values in a range slider.
Type: number

orientation SliderOrientation

Name: orientation
Description: The component orientation.
Type: SliderOrientation

step number

Name: step
Description: The step increment of the slider when incrementing or decrementing. It will snap to multiples of this value. Decimal values are supported.
Type: number

values readonly number[]

Name: values
Description: The raw number value of the slider.
Type: readonly number[]

touched boolean

Name: touched
Description: Whether the field has been touched.
Type: boolean

dirty boolean

Name: dirty
Description: Whether the field value has changed from its initial value.
Type: boolean

valid boolean | null

Name: valid
Description: Whether the field is valid. null means validity is not known yet.
Type: boolean | null

filled boolean

Name: filled
Description: Whether the field has a value.
Type: boolean

focused boolean

Name: focused
Description: Whether the field is focused.
Type: boolean

data-dragging

Present while the user is dragging.

data-orientation

Indicates the orientation of the slider.

data-disabled

Present when the slider is disabled.

data-valid

Present when the slider is in a valid state (when wrapped in Field.Root).

data-invalid

Present when the slider is in an invalid state (when wrapped in Field.Root).

data-dirty

Present when the slider's value has changed (when wrapped in Field.Root).

data-touched

Present when the slider has been touched (when wrapped in Field.Root).

data-focused

Present when the slider is focused (when wrapped in Field.Root).

Attribute	Description	-
`data-dragging`	Present while the user is dragging.
`data-orientation`	Indicates the orientation of the slider.
`data-disabled`	Present when the slider is disabled.
`data-valid`	Present when the slider is in a valid state (when wrapped in Field.Root).
`data-invalid`	Present when the slider is in an invalid state (when wrapped in Field.Root).
`data-dirty`	Present when the slider's value has changed (when wrapped in Field.Root).
`data-touched`	Present when the slider has been touched (when wrapped in Field.Root).
`data-focused`	Present when the slider is focused (when wrapped in Field.Root).

Label

An accessible label that is automatically associated with the slider thumbs. Renders a <div> element.

render Snippet<[props: HTMLAttributes<HTMLDivElement>, state: SliderRootState, children: Snippet | undefined]> —

Name: render
Type: Snippet<[props: HTMLAttributes<HTMLDivElement>, state: SliderRootState, children: Snippet | undefined]>

Value

Displays the current value of the slider as text. Renders an <output> element.

aria-live "off" | "assertive" | "polite" | null 'off'

Name: aria-live
Description: Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.
Type: "off" | "assertive" | "polite" | null
Default: 'off'

children Snippet<[formattedValues: readonly string[], values: readonly number[]]> —

Name: children
Description: Custom value text. Receives the formatted strings and the raw numbers. Omit it to show the formatted values joined with an en dash.
Type: Snippet<[formattedValues: readonly string[], values: readonly number[]]>

render Snippet<[props: HTMLAttributes<HTMLOutputElement>, state: SliderRootState, children: Snippet | undefined]> —

Name: render
Type: Snippet<[props: HTMLAttributes<HTMLOutputElement>, state: SliderRootState, children: Snippet | undefined]>

data-dragging

Present while the user is dragging.

data-orientation

Indicates the orientation of the slider.

data-disabled

Present when the slider is disabled.

data-valid

Present when the slider is in a valid state (when wrapped in Field.Root).

data-invalid

Present when the slider is in an invalid state (when wrapped in Field.Root).

data-dirty

Present when the slider's value has changed (when wrapped in Field.Root).

data-touched

Present when the slider has been touched (when wrapped in Field.Root).

data-focused

Present when the slider is focused (when wrapped in Field.Root).

Attribute	Description	-
`data-dragging`	Present while the user is dragging.
`data-orientation`	Indicates the orientation of the slider.
`data-disabled`	Present when the slider is disabled.
`data-valid`	Present when the slider is in a valid state (when wrapped in Field.Root).
`data-invalid`	Present when the slider is in an invalid state (when wrapped in Field.Root).
`data-dirty`	Present when the slider's value has changed (when wrapped in Field.Root).
`data-touched`	Present when the slider has been touched (when wrapped in Field.Root).
`data-focused`	Present when the slider is focused (when wrapped in Field.Root).

Control

The clickable, interactive part of the slider. Renders a <div> element.

render Snippet<[props: HTMLAttributes<HTMLDivElement>, state: SliderRootState, children: Snippet | undefined]> —

Name: render
Type: Snippet<[props: HTMLAttributes<HTMLDivElement>, state: SliderRootState, children: Snippet | undefined]>

data-dragging

Present while the user is dragging.

data-orientation

Indicates the orientation of the slider.

data-disabled

Present when the slider is disabled.

data-valid

Present when the slider is in a valid state (when wrapped in Field.Root).

data-invalid

Present when the slider is in an invalid state (when wrapped in Field.Root).

data-dirty

Present when the slider's value has changed (when wrapped in Field.Root).

data-touched

Present when the slider has been touched (when wrapped in Field.Root).

data-focused

Present when the slider is focused (when wrapped in Field.Root).

Attribute	Description	-
`data-dragging`	Present while the user is dragging.
`data-orientation`	Indicates the orientation of the slider.
`data-disabled`	Present when the slider is disabled.
`data-valid`	Present when the slider is in a valid state (when wrapped in Field.Root).
`data-invalid`	Present when the slider is in an invalid state (when wrapped in Field.Root).
`data-dirty`	Present when the slider's value has changed (when wrapped in Field.Root).
`data-touched`	Present when the slider has been touched (when wrapped in Field.Root).
`data-focused`	Present when the slider is focused (when wrapped in Field.Root).

Track

Contains the slider indicator and represents the entire range of the slider. Renders a <div> element.

render Snippet<[props: HTMLAttributes<HTMLDivElement>, state: SliderRootState, children: Snippet | undefined]> —

Name: render
Type: Snippet<[props: HTMLAttributes<HTMLDivElement>, state: SliderRootState, children: Snippet | undefined]>

data-dragging

Present while the user is dragging.

data-orientation

Indicates the orientation of the slider.

data-disabled

Present when the slider is disabled.

data-valid

Present when the slider is in a valid state (when wrapped in Field.Root).

data-invalid

Present when the slider is in an invalid state (when wrapped in Field.Root).

data-dirty

Present when the slider's value has changed (when wrapped in Field.Root).

data-touched

Present when the slider has been touched (when wrapped in Field.Root).

data-focused

Present when the slider is focused (when wrapped in Field.Root).

Attribute	Description	-
`data-dragging`	Present while the user is dragging.
`data-orientation`	Indicates the orientation of the slider.
`data-disabled`	Present when the slider is disabled.
`data-valid`	Present when the slider is in a valid state (when wrapped in Field.Root).
`data-invalid`	Present when the slider is in an invalid state (when wrapped in Field.Root).
`data-dirty`	Present when the slider's value has changed (when wrapped in Field.Root).
`data-touched`	Present when the slider has been touched (when wrapped in Field.Root).
`data-focused`	Present when the slider is focused (when wrapped in Field.Root).

Indicator

Visualizes the current value of the slider. Renders a <div> element.

render Snippet<[props: HTMLAttributes<HTMLDivElement>, state: SliderRootState, children: Snippet | undefined]> —

Name: render
Type: Snippet<[props: HTMLAttributes<HTMLDivElement>, state: SliderRootState, children: Snippet | undefined]>

data-dragging

Present while the user is dragging.

data-orientation

Indicates the orientation of the slider.

data-disabled

Present when the slider is disabled.

data-valid

Present when the slider is in a valid state (when wrapped in Field.Root).

data-invalid

Present when the slider is in an invalid state (when wrapped in Field.Root).

data-dirty

Present when the slider's value has changed (when wrapped in Field.Root).

data-touched

Present when the slider has been touched (when wrapped in Field.Root).

data-focused

Present when the slider is focused (when wrapped in Field.Root).

Attribute	Description	-
`data-dragging`	Present while the user is dragging.
`data-orientation`	Indicates the orientation of the slider.
`data-disabled`	Present when the slider is disabled.
`data-valid`	Present when the slider is in a valid state (when wrapped in Field.Root).
`data-invalid`	Present when the slider is in an invalid state (when wrapped in Field.Root).
`data-dirty`	Present when the slider's value has changed (when wrapped in Field.Root).
`data-touched`	Present when the slider has been touched (when wrapped in Field.Root).
`data-focused`	Present when the slider is focused (when wrapped in Field.Root).

Thumb

The draggable part of the slider at the tip of the indicator. Renders a <div> element and a nested <input type="range">.

disabled boolean | null false

Name: disabled
Description: Whether the thumb should ignore user interaction.
Type: boolean | null
Default: false

aria-valuetext string | undefined —

Name: aria-valuetext
Description: Forwarded to the nested input's aria-valuetext. Ignored when getAriaValueText is set.
Type: string | undefined

getAriaLabel function | null —

Name: getAriaLabel
Description: Returns the aria-label of the nested input.
Type: ((index: number) => string) | null

getAriaValueText function | null —

Name: getAriaValueText
Description: Returns the aria-valuetext of the nested input.
Type: ((formattedValue: string, value: number, index: number) => string) | null

index number —

Name: index
Description: The index of the thumb in value or defaultValue. Required for server-rendered range sliders.
Type: number

onblur function —

Name: onblur
Description: Blur handler forwarded to the nested input.
Type: (event: FocusEvent & { currentTarget: EventTarget & HTMLInputElement }) => void

onfocus function —

Name: onfocus
Description: Focus handler forwarded to the nested input.
Type: (event: FocusEvent & { currentTarget: EventTarget & HTMLInputElement }) => void

onkeydown function —

Name: onkeydown
Description: Keydown handler forwarded to the nested input.
Type: (event: KeyboardEvent & { currentTarget: EventTarget & HTMLInputElement }) => void

render Snippet<[props: HTMLAttributes<HTMLDivElement>, state: SliderRootState, children: Snippet | undefined]> —

Name: render
Type: Snippet<[props: HTMLAttributes<HTMLDivElement>, state: SliderRootState, children: Snippet | undefined]>

data-dragging

Present while the user is dragging.

data-orientation

Indicates the orientation of the slider.

data-disabled

Present when the slider is disabled.

data-valid

Present when the slider is in a valid state (when wrapped in Field.Root).

data-invalid

Present when the slider is in an invalid state (when wrapped in Field.Root).

data-dirty

Present when the slider's value has changed (when wrapped in Field.Root).

data-touched

Present when the slider has been touched (when wrapped in Field.Root).

data-focused

Present when the slider is focused (when wrapped in Field.Root).

data-index

Indicates the index of the thumb in range sliders.

Attribute	Description	-
`data-dragging`	Present while the user is dragging.
`data-orientation`	Indicates the orientation of the slider.
`data-disabled`	Present when the slider is disabled.
`data-valid`	Present when the slider is in a valid state (when wrapped in Field.Root).
`data-invalid`	Present when the slider is in an invalid state (when wrapped in Field.Root).
`data-dirty`	Present when the slider's value has changed (when wrapped in Field.Root).
`data-touched`	Present when the slider has been touched (when wrapped in Field.Root).
`data-focused`	Present when the slider is focused (when wrapped in Field.Root).
`data-index`	Indicates the index of the thumb in range sliders.