Biofarma | Bind UI

Range Field/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	Mobile Storybook
Code	Gitlab

Slider preview

Usage

import id.co.biofarma.binduiandroid.components.slider.Slider

Slider(
  id = "rangeSlider",
  label = "Label",
  type = "default",
  value = value,
  valueRange = valueRangeMin..valueRangeMax,
  range = 0f..100f,
  steps = 1,
  disabled = true,
  variant = "primary",
  size = "lg",
  radius = "",
  mode = "dark",
  showMin = true,
  showMax = false,
  isError = false,
  errorMessage = "label",
  onChangeRange = { first, second ->
      valueRangeMin = first
      valueRangeMax = second
  },
)

Examples

Variant

Use variant for change slider component variant: primary or secondary

Slider preview 2

Type

Use type for change slider type: default or range

Slider preview 3

Mode (Optional)

Use mode for change color mode of slider component: light or dark

Slider preview 4

Props

Props	Required	Default	Type	description
id	true	`slider`	`string`	Used for set the id of slider component.
type	false	`default`	`default` `range`	Used for change the type of slider component.
label	true	`default`	`string`	Used for change the label text of slider component.
variant	false	`primary`	`primary` `secondary`	Used for change the variant of slider component.
isError	false	`false`	`boolean`	Used for toggle error or not-error of slider component.
size	false	`sm`	`sm` `md` `lg`	Used for change the size of slider component.
showMin	true	`true`	`boolean`	Used for toggle show or hide min value.
showMax	true	`true`	`boolean`	Used for toggle show or hide max value.
errorMessage	true	`default`	`string`	Used for change the label error of slider component.
value	true	`2`	`float`	Used for set value of the thumb on slider, When you first load the slider, this value will be read as the active value.
valueStar	true	`0`	`float`	Used for set value star of the thumb on slider.
valueEnd	true	`200`	`float`	Used for set value end of the thumb on slider.
rangeStar	true	`0`	`float range`	Used for set range star of the slider component.
rangeEnd	true	`200`	`float range`	Used for set range end of the slider component.
steps	true	`1`	`Integer`	Used for set steps when moving the thumb slider.
disabled	false	`false`	`boolean`	Used for toggle disable or not-disable slider component.

Select Switch