AdjustmentSlider provides a compact, touch-friendly slider with a built-in label, optional icon, and animated value display. The filled portion of the track animates smoothly as the value changes.
Installation
npm install @soft-ui/react
Usage
import { AdjustmentSlider } from "@soft-ui/react/adjustment-slider"
import { RiVolumeMuteLine } from "@soft-ui/icons"
function Example() {
const [volume, setVolume] = useState(50)
return (
<AdjustmentSlider
label="Volume"
icon={<RiVolumeMuteLine />}
value={volume}
onValueChange={(value) => setVolume(value as number)}
min={0}
max={100}
/>
)
}
API Reference
Props
Label text displayed next to the icon
Icon displayed at the start of the slider
size
's' | 'm' | 'l'
default:"'m'"
Size variant matching input component sizes:
s: 32px heightm: 36px height (default)l: 40px height
Whether to show the current value
renderValue
(value: number) => React.ReactNode
Custom render function for the value display. Overrides the default numeric display.
Whether to animate the value changes using NumberFlow
value
number | readonly number[]
Controlled value of the slider
defaultValue
number | readonly number[]
Uncontrolled default value
onValueChange
(value: number | readonly number[], details: ChangeEventDetails) => void
Callback fired when the value changes
Step increment for value changes
Whether the slider is disabled
Additional CSS classes for the root element
Explicit escape hatch for intentional structural overrides
Examples
With Icon
import { RiVolumeMuteLine } from "@soft-ui/icons"
<AdjustmentSlider
label="Volume"
icon={<RiVolumeMuteLine />}
defaultValue={75}
min={0}
max={100}
/>
Without Value Display
<AdjustmentSlider
label="Brightness"
defaultValue={50}
showValue={false}
/>
Custom Value Renderer
<AdjustmentSlider
label="Temperature"
defaultValue={72}
min={60}
max={85}
renderValue={(value) => `${value}°F`}
/>
Different Sizes
<div className="flex flex-col gap-4">
<AdjustmentSlider label="Small" size="s" defaultValue={30} />
<AdjustmentSlider label="Medium" size="m" defaultValue={50} />
<AdjustmentSlider label="Large" size="l" defaultValue={70} />
</div>
Disabled State
<AdjustmentSlider
label="Volume"
icon={<RiVolumeMuteLine />}
defaultValue={50}
disabled
/>
Controlled
function ControlledExample() {
const [value, setValue] = useState(50)
return (
<div className="flex flex-col gap-4">
<AdjustmentSlider
label="Volume"
value={value}
onValueChange={(v) => setValue(v as number)}
/>
<p>Current value: {value}</p>
</div>
)
}