On this page

Slider Primitive

Slider is a Starwind Runtime primitive in the form-value-control contract family. Astro and React share one semantic component API. React coordinates reactive state through controlled and default props plus callbacks. Astro renders initial state and coordinates later changes through DOM events and Runtime methods. Raw HTML uses Runtime attributes, DOM events, and imperative methods.

Anatomy

Use the Astro primitive adapter to render Slider anatomy with the Runtime wiring included.

---
import { Slider } from "@starwind-ui/astro/slider";
---

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

Use the React primitive adapter when Slider state participates in React rendering.

import { Slider } from "@starwind-ui/react/slider";

export function Example() {
  return (
    <Slider.Root>
      <Slider.Label>Volume</Slider.Label>
      <Slider.Control>
        <Slider.Track>
          <Slider.Indicator />
          <Slider.Thumb />
        </Slider.Track>
      </Slider.Control>
    </Slider.Root>
  );
}

Render the Slider data-sw-* contract yourself, then initialize createSlider.

<div data-sw-slider role="group">
  <span data-sw-slider-label>Volume</span>
  <div data-sw-slider-control>
    <div data-sw-slider-track>
      <div data-sw-slider-indicator></div>
      <div data-sw-slider-thumb></div>
    </div>
  </div>
</div>

<script type="module">
  import { createSlider } from "@starwind-ui/runtime/slider";

  const root = document.querySelector("[data-sw-slider]");
  if (root) {
    createSlider(root);
  }
</script>

API Reference

Root

The main element that owns the Slider Runtime instance.

Default element: div
Discovery hook: data-sw-slider
Role: group

Props

Prop Type Default

value SliderValue -

Description

Controls the current Slider value.

Kind

control

Targets

Full type

SliderValue

React

Use value for controlled state and defaultValue for default state, and onValueChange for change proposals.

value
defaultValue
onValueChange

Astro

Use value or defaultValue for initial state, listen for starwind:value-change, and call setValue for later updates.

value
defaultValue
starwind:value-change
setValue

Runtime / HTML

Use data-default-value for initial state, listen for starwind:value-change, and call setValue for later updates.

data-default-value
starwind:value-change
setValue

defaultValue SliderValue 0

Description

Sets the initial Slider value for uncontrolled usage.

Kind

control

Targets

Full type

SliderValue

React

Use value for controlled state and defaultValue for default state, and onValueChange for change proposals.

value
defaultValue
onValueChange

Astro

Use value or defaultValue for initial state, listen for starwind:value-change, and call setValue for later updates.

value
defaultValue
starwind:value-change
setValue

Runtime / HTML

Use data-default-value for initial state, listen for starwind:value-change, and call setValue for later updates.

data-default-value
starwind:value-change
setValue

disabled boolean false

Description: Disables the Root part.
Kind: option
Targets: -
Full type: boolean

form string -

Description: Associates the control with a form element.
Kind: option
Targets: -
Full type: string

largeStep number 10

Description: Configures the large step option for the Root part.
Kind: option
Targets: -
Full type: number

max number 100

Description: Configures the max option for the Root part.
Kind: option
Targets: -
Full type: number

min number 0

Description: Configures the min option for the Root part.
Kind: option
Targets: -
Full type: number

minStepsBetweenValues number 0

Description: Configures the min steps between values option for the Root part.
Kind: option
Targets: -
Full type: number

name string -

Description: Sets the submitted form field name.
Kind: option
Targets: -
Full type: string

orientation SliderOrientation "horizontal"

Description: Sets the Slider orientation.
Kind: option
Targets: -
Full type: SliderOrientation

step number 1

Description: Configures the step option for the Root part.
Kind: option
Targets: -
Full type: number

onValueChange (value: SliderValue, details: SliderValueChangeDetails) => void -

Description

Runs when the Slider value changes.

Kind

callback

Targets

Full type

(value: SliderValue, details: SliderValueChangeDetails) => void

React

Use value for controlled state and defaultValue for default state, and onValueChange for change proposals.

value
defaultValue
onValueChange

Astro

Use value or defaultValue for initial state, listen for starwind:value-change, and call setValue for later updates.

value
defaultValue
starwind:value-change
setValue

Runtime / HTML

Use data-default-value for initial state, listen for starwind:value-change, and call setValue for later updates.

data-default-value
starwind:value-change
setValue

onValueCommitted (value: SliderValue, details: SliderValueCommitDetails) => void -

Description: Runs when on value committed changes for Slider.
Kind: callback
Targets: -
Full type: (value: SliderValue, details: SliderValueCommitDetails) => void

Events

Event Callback Value

valueChange onValueChange value: SliderValue

Description

Fires when the value changes for Slider.

DOM event

starwind:value-change

Details type

SliderValueChangeDetails

Timing

before-state-commit

Cancelable

Yes

Cancellation sequence

Check internal eligibility and intent.
Create one details object for the proposal.
Call the Runtime callback with the details object when the controller exposes one.
Dispatch the cancelable DOM event with the same details object, including when the callback canceled it.
Read details.isCanceled, including cancellation caused by preventDefault().
Apply the accepted state.
Notify Runtime subscribers and other accepted-only observers.

valueCommitted onValueCommitted value: SliderValue

Description: Fires when the user commits the value for Slider.
DOM event: starwind:value-committed
Details type: SliderValueCommitDetails
Timing: -
Cancelable: No

State

State Type Props

value SliderValue value / defaultValue

Description

Tracks the current Slider value.

Initial attribute

data-default-value

Runtime getter

getValue

Runtime setter

setValue

React

Use value for controlled state and defaultValue for default state, and onValueChange for change proposals.

value
defaultValue
onValueChange

Astro

Use value or defaultValue for initial state, listen for starwind:value-change, and call setValue for later updates.

value
defaultValue
starwind:value-change
setValue

Runtime / HTML

Use data-default-value for initial state, listen for starwind:value-change, and call setValue for later updates.

data-default-value
starwind:value-change
setValue

Data Attributes

Runtime hooks

Attribute Value Description

data-sw-slider - Marks the Root part so Starwind Runtime can find it.

State

Attribute Value Description

data-value - Reflects the value state on the Root part.

Metadata

Attribute Value Description

data-default-value - Reflects the default value prop on the Root part.

data-disabled - Reflects the disabled prop on the Root part.

data-form - Reflects the form prop on the Root part.

data-large-step - Reflects the large step prop on the Root part.

data-max - Reflects the max prop on the Root part.

data-min - Reflects the min prop on the Root part.

data-min-steps-between-values - Reflects the min steps between values prop on the Root part.

data-name - Reflects the name prop on the Root part.

data-orientation - Reflects the orientation prop on the Root part.

data-step - Reflects the step prop on the Root part.

Control

Groups the interactive controls for Slider.

Default element: div
Discovery hook: data-sw-slider-control
Role: -

Data Attributes

Runtime hooks

Attribute Value Description

data-sw-slider-control - Marks the Control part so Starwind Runtime can find it.

Track

The track that contains the Slider range.

Default element: div
Discovery hook: data-sw-slider-track
Role: -

Data Attributes

Runtime hooks

Attribute Value Description

data-sw-slider-track - Marks the Track part so Starwind Runtime can find it.

Indicator

Visual state indicator rendered by Slider.

Default element: div
Discovery hook: data-sw-slider-indicator
Role: -

Data Attributes

Runtime hooks

Attribute Value Description

data-sw-slider-indicator - Marks the Indicator part so Starwind Runtime can find it.

Label

Text label associated with Slider.

Default element: span
Discovery hook: data-sw-slider-label
Role: -

Data Attributes

Runtime hooks

Attribute Value Description

data-sw-slider-label - Marks the Label part so Starwind Runtime can find it.

Thumb

The draggable thumb for Slider.

Default element: div
Discovery hook: data-sw-slider-thumb
Role: -

Props

Prop Type Default

index number -

Description: Sets the index attribute on the Thumb part.
Kind: attribute
Targets: thumb
Full type: number

Data Attributes

Runtime hooks

Attribute Value Description

data-sw-slider-thumb - Marks the Thumb part so Starwind Runtime can find it.

Metadata

Attribute Value Description

data-index - Reflects the index prop on the Thumb part.

Input

The native input synchronized by Slider.

Default element: input
Discovery hook: data-sw-slider-input
Role: -

Data Attributes

Runtime hooks

Attribute Value Description

data-sw-slider-input - Marks the Input part so Starwind Runtime can find it.

Runtime API

Factory: createSlider
Import: @starwind-ui/runtime/slider
Root hook: root data-sw-slider
Option props: defaultValue, disabled, form, largeStep, max, min, minStepsBetweenValues, name, orientation, step, value

Option Lifecycles

Option	Lifecycle
disabled	setter-backed
form	setter-backed
largeStep	setter-backed
max	setter-backed
min	setter-backed
minStepsBetweenValues	setter-backed
name	setter-backed
orientation	setter-backed
step	setter-backed
value	setter-backed

Runtime Setters

Method Target Description

setValue state: value Updates the current Slider value from Runtime code.

setDisabled prop: disabled Updates whether Slider is disabled from Runtime code.

setName prop: name Updates the Slider form field name from Runtime code.

setOptions props: form, largeStep, max, min, minStepsBetweenValues, orientation, step Updates Runtime options after initialization.

Form Participation

Fact	Value
Form props	form, name, value
Hidden input	input (range)
Field integration	Yes

Component Relationship

Slider Direct primitive

Changelog

View version history v1.0.0 3 releases

v1.0.0

Promoted this Primitive's vendoring version to the stable 1.0.0 baseline. Its existing API and Runtime behavior carry forward from the previous release.

v0.1.1

Marked generated React Primitive files as client modules so vendored installs preserve client boundaries in React server frameworks.
Kept generated React state-change callbacks and DOM events cancelable until the Runtime accepts the proposed state, then synchronized rendered state.

v0.1.0

Introduced single and multi-value state, pointer dragging, keyboard interaction, and form participation.

Layer Metadata

Slider Primitive uses createSlider. Styled components: Slider.

primitive Slider Primitive Slider Primitive uses createSlider. Styled components: Slider. Runtime primitive Primitive adapter Astro Primitive adapters React Primitive adapters slider Slider Form Value Control Controls that participate directly in form value submission. /docs/primitives/slider/ createSlider @starwind-ui/runtime/slider /docs/runtime/#create-slider root defaultValue disabled form largeStep max min minStepsBetweenValues name orientation step value raw-html astro react solid svelte vue HTML Astro React Solid Svelte Vue Raw HTML Render the Slider data-sw-* contract yourself, then initialize createSlider. html Use the Astro primitive adapter to render Slider anatomy with the Runtime wiring included. Use the React primitive adapter when Slider state participates in React rendering. tsx div data-sw-slider group SliderValue Controls the current Slider value. Sets the initial Slider value for uncontrolled usage. boolean Disables the Root part. string Associates the control with a form element. number Configures the large step option for the Root part. Configures the max option for the Root part. Configures the min option for the Root part. Configures the min steps between values option for the Root part. Sets the submitted form field name. SliderOrientation Sets the Slider orientation. Configures the step option for the Root part. onValueChange (value: SliderValue, details: SliderValueChangeDetails) => void SliderValueChangeDetails Runs when the Slider value changes. onValueCommitted (value: SliderValue, details: SliderValueCommitDetails) => void SliderValueCommitDetails Runs when on value committed changes for Slider. runtime Marks the Root part so Starwind Runtime can find it. data-default-value prop Reflects the default value prop on the Root part. data-disabled Reflects the disabled prop on the Root part. data-form Reflects the form prop on the Root part. data-large-step Reflects the large step prop on the Root part. data-max Reflects the max prop on the Root part. data-min Reflects the min prop on the Root part. data-min-steps-between-values Reflects the min steps between values prop on the Root part. data-name Reflects the name prop on the Root part. data-orientation Reflects the orientation prop on the Root part. data-step Reflects the step prop on the Root part. data-value state Reflects the value state on the Root part. getValue setValue valueChange starwind:value-change valueCommitted starwind:value-committed setDisabled setName setOptions form, largeStep, max, min, minStepsBetweenValues, orientation, step control data-sw-slider-control Marks the Control part so Starwind Runtime can find it. track data-sw-slider-track Marks the Track part so Starwind Runtime can find it. indicator data-sw-slider-indicator Marks the Indicator part so Starwind Runtime can find it. label span data-sw-slider-label Marks the Label part so Starwind Runtime can find it. thumb data-sw-slider-thumb index Sets the index attribute on the Thumb part. Marks the Thumb part so Starwind Runtime can find it. data-index Reflects the index prop on the Thumb part. input data-sw-slider-input Marks the Input part so Starwind Runtime can find it. Root Control Track Indicator Label Thumb Input type aria-hidden tabIndex @starwind-ui/astro @starwind-ui/astro/slider Render uncontrolled initial values; runtime owns range input state and form naming after hydration. Slider controlledness is fixed when the Runtime is created; do not switch between controlled and uncontrolled after hydration. @starwind-ui/react @starwind-ui/react/slider Bridge controlled values through setValue after refreshing thumbs so newly rendered range thumbs participate. Slider controlledness is fixed when the Runtime is created; do not switch between controlled and uncontrolled after mount. /docs/components/slider/ Direct primitive direct-primitive Styled component Slider

Slider Primitive

Anatomy

API Reference

Root

Props

Events

State

Data Attributes

Runtime hooks

State

Metadata

Control

Data Attributes

Runtime hooks

Track

Data Attributes

Runtime hooks

Indicator

Data Attributes

Runtime hooks

Label

Data Attributes

Runtime hooks

Thumb

Props

Data Attributes

Runtime hooks

Metadata

Input

Data Attributes

Runtime hooks

Runtime API

Option Lifecycles

Runtime Setters

Form Participation

Related Styled Components

Changelog

v1.0.0

v0.1.1

v0.1.0