Number Slider

Labeled slider with a live numeric readout.

Installation

Add this item from the registry, or import it from the package after installing Default File UI.

Registry path

itsvigneshv/default-file-ui/number-slider

Package import

import { NumberSlider } from "@default-file/ui/components/df-number-slider"

Default

Fractional step with a live readout.

0.42

Integer step

Whole-number range.

8

Properties

Labeled slider with a live numeric readout. Composes Label and Slider.

NumberSlider

PropTypeDefaultNotes
labelstringField label above the slider (required).
valuenumberCurrent value (required).
minnumberMinimum value (required).
maxnumberMaximum value (required).
stepnumber0.01Increment between values. Also drives display precision.
onChange(value: number) => voidCalled when the value changes (required).