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}
            min={0}
            max={100}
            onChange={(e) => setVolume(e.value)}
        />
    )
}

Props#

Prop	Type	Description
`value`	`number`	Current value
`min`	`number`	Smallest value (`lowValue`, UI Toolkit's name, also works)
`max`	`number`	Largest value (`highValue` also works)
`label`	`string`	Label shown beside the slider
`direction`	`"Horizontal"`, `"Vertical"`	Orientation (default `"Horizontal"`)
`pageSize`	`number`	How far a click on the track moves the value
`showInputField`	`boolean`	Show a numeric input field next to the slider
`inverted`	`boolean`	Swap which end is `min` and which is `max`
`fill`	`boolean`	Fill the track between the start and the handle
`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}
                min={0}
                max={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: ${Math.round(master)}%`} style={{ marginBottom: 5 }} />
                <Slider value={master} min={0} max={100} onChange={(e) => setMaster(e.value)} />
            </View>
            <View style={{ marginBottom: 20 }}>
                <Label text={`Music: ${Math.round(music)}%`} style={{ marginBottom: 5 }} />
                <Slider value={music} min={0} max={100} onChange={(e) => setMusic(e.value)} />
            </View>
            <View>
                <Label text={`Sound Effects: ${Math.round(sfx)}%`} style={{ marginBottom: 5 }} />
                <Slider value={sfx} min={0} max={100} onChange={(e) => setSfx(e.value)} />
            </View>
        </View>
    )
}

Custom Range#

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

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

Styled Slider#

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