Angle Slider

An Angle Slider Component is a circular UI control for selecting or adjusting angular values, typically in degrees, by dragging a handle along a curve.

Wind Direction

0deg

Usage

<script>
  import {AngleSlider} from 'ui-ingredients';

  let degrees = [0, 45, 90, 135, 180, 225, 270, 315];
</script>

<AngleSlider.Root>
  <AngleSlider.Label>Label</AngleSlider.Label>
  <AngleSlider.Control>
    <AngleSlider.MarkerGroup>
      {#each degrees as value}
        <AngleSlider.Marker {value} />
      {/each}
    </AngleSlider.MarkerGroup>
    <AngleSlider.Thumb />
  </AngleSlider.Control>
  <AngleSlider.ValueText />
  <AngleSlider.HiddenInput />
</AngleSlider.Root>

API Reference

Root

Prop	Default	Description
`defaultValue`	`0`	`number` The initial value of the slider. Use when you don't need to control the value of the slider.
`disabled`		`boolean` Whether the slider is disabled.
`id`		`string` The unique identifier of the machine.
`ids`		`{ root?: string; item(value: string)?: string; itemContent(value: string)?: string; itemTrigger(value: string): string; }` The ids of the elements in the accordion. Useful for composition.
`invalid`		`boolean` Whether the slider is invalid.
`keepMounted`		`boolean` Whether to keep the component mounted after exit.
`lazyMount`		`boolean` Whether to enable lazy mounting.
`name`		`string` The name of the slider. Useful for form submission.
`onValueChange`		`(details: ValueChangeDetails) => void` The callback function for when the value changes.
`onValueChangeEnd`		`(details: ValueChangeDetails) => void` The callback function for when the value changes ends.
`readOnly`		`boolean` Whether the slider is read-only.
`step`	`1`	`number` The step value for the slider.
`value`		`number` The value of the slider.
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-disabled`	Present when disabled
`data-invalid`	Present when invalid
`data-part`	root
`data-readonly`	Present when read-only
`data-scope`	angle-slider

Control

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-disabled`	Present when disabled
`data-invalid`	Present when invalid
`data-part`	control
`data-readonly`	Present when read-only
`data-scope`	angle-slider

HiddenInput

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Label

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-disabled`	Present when disabled
`data-invalid`	Present when invalid
`data-part`	label
`data-readonly`	Present when read-only
`data-scope`	angle-slider

Marker

Prop	Default	Description
`value`		`number` The value of the marker.
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-disabled`	Present when disabled
`data-part`	marker
`data-scope`	angle-slider
`data-state`
`data-value`	The value of the item

MarkerGroup

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Thumb

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-disabled`	Present when disabled
`data-invalid`	Present when invalid
`data-part`	thumb
`data-readonly`	Present when read-only
`data-scope`	angle-slider

Track

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

ValueText

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Accessibility

Keyboard Support

Key	Description
ArrowRight	Increments the slider based on defined step
ArrowLeft	Decrements the slider based on defined step
ArrowUp	Increases the value by the step amount.
ArrowDown	Decreases the value by the step amount.
PageUp	Increases the value by a larger step
PageDown	Decreases the value by a larger step
Shift + ArrowUp	Increases the value by a larger step
Shift + ArrowDown	Decreases the value by a larger step
Home	Sets the value to its minimum.
End	Sets the value to its maximum.