Forms

Slider

Range slider with custom thumb and track styling.

Precision Range

Allow users to select from a range of values with high-fidelity haptic feedback. Perfect for brightness, volume, and zoom controls.

Screen Brightness80

System Volume45%

Exposure Offset0.0

System Restricted30

'use client'

import React from 'react'
import { Slider, Stack } from 'biibaos'

export default function App() {
  return (
    <Stack direction="column" gap={24}>
      <Slider label="Brightness" defaultValue={80} />
      <Slider 
        label="Volume" 
        min={0} 
        max={100} 
        step={5} 
        formatValue={(v) => `${v}%`} 
      />
    </Stack>
  )
}

Real-world: Media Controls

An interactive example showing synchronized state across multiple sliders.

Volume65%

Brightness

'use client'

import { Slider, Stack } from 'biibaos'
import { useState } from 'react'

export default function MediaControls() {
  const [vol, setVol] = useState(65)
  
  return (
    <Stack direction="column" gap={24} style={{ width: 300 }}>
      <Slider 
        label="Volume"
        value={vol}
        onChange={setVol}
        formatValue={(v) => v === 0 ? 'Muted' : `${v}%`}
      />
      <Slider 
        label="Brightness"
        defaultValue={80}
        showValue={false}
      />
    </Stack>
  )
}

Properties

Prop	Type	Default	Description
`value`	`number`	—	Raw data string or URL to encode into the QR grid
`defaultValue`	`number`	—	Initial uncontrolled default value
`min`	`number`	—	Minimum numerical selectable bound
`max`	`number`	—	Maximum numerical selectable bound
`step`	`number`	—	Step increment intervals for selection
`onChange`	`(value: number) => void`	—	Callback function triggered when the value changes
`label`	`string`	—	Primary text label description
`showValue`	`boolean`	—	If true, prints percentage label text
`disabled`	`boolean`	—	If true, disables all user interaction and applies faded opacity
`formatValue`	`(v: number) => string`	—	Configures the formatValue option

Toggle

Upload