Biofarma | Bind UI

Slider

A slider is, at minimum, made of a track and thumb. The slider can have one thumb for the user to select a single value or two thumb to select a range.

Type	Resource
Design	Figma
Web	Web Storybook
Code	Gitlab

Label

100

Usage

import { Slider } from 'bio-bind-ui';

<Slider
  errorText='Error message'
  id='slider'
  label='Label'
  max={100}
  min={0}
  mode='light'
  name='slider'
  onSliderChange={() => {}}
  showMaxValue
  showMinValue
  size='md'
  variant='primary'
/>

Examples

Secondary Color

Slider component have 2 variant color, primary and secondary

Label

100

Mode (Optional)

Use mode to use dark or light

Label

100

Range (Optional)

Whether the slider is a range slider or not

Label

100

Props

Props	Required	Default	Type	description
variant	false	`primary`	`primary` `secondary`	Slider variant
size	false	`md`	`sm` `md` `lg`	Size of the slider
mode	false	`light`	`light` `dark`	Light & dark mode for slider
isRange	false	`false`	`boolean`	Whether the slider is a range slider or not
isError	false	`false`	`boolean`	Whether the radio button is in error state or not
errorText	false	-	`string`	For showing error text
disabled	false	`false`	`boolean`	Whether the slider should be disabled or not
label	true	`label`	`string`	Label for the slider
min	true	`0`	`number[]`	Slider min value
showMinValue	true	`false`	`boolean`	Whether to show the min value or not
max	true	`100`	`number[]`	Slider max value
showMaxValue	true	`false`	`boolean`	Whether to show the max value or not
id	true	`slider`	`string`	Id for the slider
name	true	`slider`	`string`	Name for the slider
onSliderChange	true	-	`function`	Callback function to run when the slider value is changed

Select Switch