","children":["$","span",null,{"style":{"--0":"#B9BED5"},"children":" "}]}],["$","span",null,{"style":{"--0":"#B9BED5"},"children":""}]]}]}] 31:["$","div",null,{"className":"ec-line","children":["$","div",null,{"className":"code","children":[["$","span",null,{"className":"indent","children":["$","span",null,{"style":{"--0":"#B9BED5"},"children":" "}]}],["$","span",null,{"style":{"--0":"#B9BED5"},"children":""}]]}]}] 32:["$","div",null,{"className":"ec-line","children":["$","div",null,{"className":"code","children":[["$","span",null,{"className":"indent","children":["$","span",null,{"style":{"--0":"#B9BED5"},"children":" "}]}],["$","span",null,{"style":{"--0":"#B9BED5"},"children":""}]]}]}] 33:["$","div",null,{"className":"ec-line","children":["$","div",null,{"className":"code","children":[["$","span",null,{"className":"indent","children":["$","span",null,{"style":{"--0":"#B9BED5"},"children":" "}]}],["$","span",null,{"style":{"--0":"#B9BED5"},"children":""}]]}]}] 34:["$","div",null,{"className":"ec-line","children":["$","div",null,{"className":"code","children":[["$","span",null,{"className":"indent","children":["$","span",null,{"style":{"--0":"#B9BED5"},"children":" "}]}],["$","span",null,{"style":{"--0":"#B9BED5"},"children":");"}]]}]}] 35:["$","div",null,{"className":"ec-line","children":["$","div",null,{"className":"code","children":["$","span",null,{"style":{"--0":"#B9BED5"},"children":"}"}]}]}] 36:["$","div",null,{"className":"copy","children":[["$","div",null,{"aria-live":"polite","children":"$undefined"}],["$","button",null,{"title":"Copy to clipboard","data-copied":"Copied!","data-code":"\"use client\";import { Slider } from \"@base-ui/react/slider\";import * as React from \"react\";export default function ExampleSlider() { const [value, setValue] = React.useState(50); return (

Brightness {value}%

);}","children":["$","div",null,{"children":"$undefined"}]}]]}]

Slider

Installation

Examples

Base

API Reference