Photonix

Slider

Allows users to select a value from a range.

Preview

Budget allocation

Usage
"use client";

import { Box, Slider, Stack, Text } from '@photonix/ultimate';

export default function SliderBasicExample() {
    return (
        <Box w={360}>
            <Stack gap="sm">
                <Text variant="label-md">Budget allocation</Text>
                <Slider defaultValue={64} min={0} max={100} step={1} />
            </Stack>
        </Box>
    );
}

Component API

Slider

Prop
Type
Default
Description
value
number
-
Current value (controlled)
defaultValue
number
0
Default value (uncontrolled)
min
number
0
Minimum value
max
number
100
Maximum value
step
number
1
Step value
onChange
((value: number) => void)
-
Callback when value changes
disabled
boolean
false
Disabled state
className
string
-
Custom class name

Variants

Steps & Range

Restrict selection to specific intervals.

Steps of 25

Steps of 1

Steps & Range
"use client";

import { Box, Flex, Slider, Text } from '@photonix/ultimate';

export default function SliderStepsExample() {
    return (
        <Flex direction="column" gap="lg" maxW={300}>
            <Box>
                <Text variant="body-sm" color="secondary" style={{ marginBottom: '8px' }}>Steps of 25</Text>
                <Slider min={0} max={100} step={25} defaultValue={50} />
            </Box>
            <Box>
                <Text variant="body-sm" color="secondary" style={{ marginBottom: '8px' }}>Steps of 1</Text>
                <Slider min={0} max={10} step={1} defaultValue={5} />
            </Box>
        </Flex>
    );
}

States

Disabled state.

States
"use client";

import { Box, Slider } from '@photonix/ultimate';

export default function SliderStatesExample() {
    return (
        <Box maxW={300}>
            <Slider disabled defaultValue={30} />
        </Box>
    );
}

On this page

Preview
Component API
Variants
Steps & Range
States
Photonix UI - React Components, Templates & Figma Design System