Slider

Slider is a range input. Maps to UI Toolkit's Slider.

Import

import { Slider } from "onejs-react"

Basic Usage

function VolumeControl() {
    const [volume, setVolume] = useState(50)

    return (
        <Slider
            value={volume}
            lowValue={0}
            highValue={100}
            onChange={(e) => setVolume(e.value)}
        />
    )
}

Props

Prop	Type	Description
`value`	`number`	Current value
`lowValue`	`number`	Minimum value
`highValue`	`number`	Maximum value
`style`	`ViewStyle`	Inline styles
`className`	`string`	USS class name(s)
`onChange`	`(e) => void`	Change handler

With Label

function VolumeSlider() {
    const [volume, setVolume] = useState(75)

    return (
        <View>
            <View style={{ flexDirection: "row", justifyContent: "space-between", marginBottom: 10 }}>
                <Label text="Volume" />
                <Label text={`${Math.round(volume)}%`} />
            </View>
            <Slider
                value={volume}
                lowValue={0}
                highValue={100}
                onChange={(e) => setVolume(e.value)}
            />
        </View>
    )
}

Multiple Sliders

function AudioSettings() {
    const [master, setMaster] = useState(100)
    const [music, setMusic] = useState(80)
    const [sfx, setSfx] = useState(90)

    return (
        <View>
            <View style={{ marginBottom: 20 }}>
                <Label text={`Master: ${master}%`} style={{ marginBottom: 5 }} />
                <Slider value={master} lowValue={0} highValue={100} onChange={(e) => setMaster(e.value)} />
            </View>
            <View style={{ marginBottom: 20 }}>
                <Label text={`Music: ${music}%`} style={{ marginBottom: 5 }} />
                <Slider value={music} lowValue={0} highValue={100} onChange={(e) => setMusic(e.value)} />
            </View>
            <View>
                <Label text={`Sound Effects: ${sfx}%`} style={{ marginBottom: 5 }} />
                <Slider value={sfx} lowValue={0} highValue={100} onChange={(e) => setSfx(e.value)} />
            </View>
        </View>
    )
}

Custom Range

// Temperature: -20 to 40 degrees
<Slider
    value={temperature}
    lowValue={-20}
    highValue={40}
    onChange={(e) => setTemperature(e.value)}
/>

// Float values: 0.0 to 1.0
<Slider
    value={opacity}
    lowValue={0}
    highValue={1}
    onChange={(e) => setOpacity(e.value)}
/>

Styled Slider

<Slider
    value={value}
    lowValue={0}
    highValue={100}
    onChange={(e) => setValue(e.value)}
    style={{
        width: 200,
        marginTop: 10,
        marginBottom: 10,
    }}
/>