Slider - OneScript

A controlled slider. Pass the current value and update it from onChange.

import { Slider, useState } from "onescript/views"

function VolumeSlider() {
  const [volume, setVolume] = useState(50)
  return (
    <Slider
      value={volume}
      onChange={setVolume}
      min={0}
      max={100}
      step={1}
    >
      Volume
    </Slider>
  )
}

Prop	Type	Description
`value`	`number`	Current value.
`onChange`	`(value: number) => void`	Runs while the user drags the slider.
`min`	`number`	Lower bound. Defaults to `0`.
`max`	`number`	Upper bound. Defaults to `1`. Must be greater than `min`.
`step`	`number`	Optional positive step. Without it the value is continuous.
`minimumValueLabel`	`ViewChild`	View shown at the minimum end of the track.
`maximumValueLabel`	`ViewChild`	View shown at the maximum end of the track.
`onEditingChanged`	`(editing: boolean) => void`	Receives `true` when the user starts dragging and `false` when they release.
`children`	`ViewChild`	The label. Most styles only use it for accessibility.

import { Slider, Symbol } from "onescript/views"

<Slider
  value={brightness}
  onChange={setBrightness}
  minimumValueLabel={<Symbol name="sun.min" />}
  maximumValueLabel={<Symbol name="sun.max.fill" />}
  onEditingChanged={editing => setDragging(editing)}
>
  Brightness
</Slider>

Also accepts Modifiers. It is only available in App and Action view sessions; widgets reject it with an unsupported view type error.