Skip to content
BigBang

Popular

    ↑↓Navigate↵OpenEscClose
    TR

    Components

    Slider

    Pick a value or a range by dragging a thumb along a track, or with the arrow keys.

    Storybook
    Storybook
    Source
    Source

    Installation

    Section titled “Installation”
    Package
    @bigbang/ui
    Import
    import { Slider } from '@bigbang/ui';
    Source
    Slider.tsx
    Storybook
    Slider · Playground

    Slider is in the @bigbang/ui package.

    import { Slider } from '@bigbang/ui';
    

    <Slider label="Level" value={level} onValueChange={setLevel} onValueCommitted={save} />;

    Props

    Section titled “Props”
    labelRequired
    Description
    The visible label; it names the slider.
    Type
    string
    description
    Description
    Help text under the slider, linked with aria-describedby.
    Type
    ReactNode
    value
    Description
    Value when you control it: a number, or [low, high] for a range with two thumbs. Pass it with onValueChange.
    Type
    Value
    defaultValue
    Description
    Initial value when the slider is uncontrolled; [low, high] makes a range.
    Type
    Value
    onValueChange
    Description
    Called on every change while the user drags or presses keys.
    Type
    (value: T) => void
    onValueCommitted
    Description
    Called once when the user lets go or finishes with the keyboard. Use it for expensive work.
    Type
    (value: T) => void
    min
    Description
    Lowest value.
    Type
    number
    Default
    0
    max
    Description
    Highest value.
    Type
    number
    Default
    100
    step
    Description
    Amount one arrow key press or snap moves.
    Type
    number
    Default
    1
    largeStep
    Description
    Amount Page Up, Page Down and Shift + arrow move.
    Type
    number
    Default
    10
    minStepsBetweenValues
    Description
    Smallest gap between the two thumbs of a range, in steps.
    Type
    number
    Default
    0
    format
    Description
    Intl.NumberFormat options for the visible and announced value, such as { style: 'percent' } or a unit.
    Type
    NumberFormatOptions
    showValue
    Description
    Shows the formatted value next to the label.
    Type
    boolean
    Default
    true
    marks
    Description
    Ticks under the track, with optional labels. Drawn only when the slider is horizontal.
    Type
    readonly SliderMark[]
    orientation
    Description
    Direction of the track. A vertical slider is at least 160 px tall, grows with its container and shows its value only in the header.
    Type
    'horizontal' | 'vertical'
    Default
    'horizontal'
    disabled
    Description
    Turns off interaction and fades the slider.
    Type
    boolean
    Default
    false
    name
    Description
    Field name; a range sends two values under the same name.
    Type
    string
    className
    Description
    Added to the root element; use it for layout only.
    Type
    string

    Data attributes

    Section titled “Data attributes”
    • data-component="slider": on the root element.
    • data-part: label, value, control, track, indicator, thumb, bubble, marks, description.
    • Base UI adds data-dragging, data-disabled, data-orientation.