Slider

An input element where the user selects a value from within a given range.

Examples

Circle

Step

State

Show Value

State

Disabled

Volume Control50

import { Slider } from 'kalki-design'

export default function Example() {
  return (
    <Slider
      label="Volume Control"
      defaultValue={[50]}
    />
  )
}

Installation

npx kalki-design add slider

Usage

import { Slider } from 'kalki-design'

export default function Example() {
  return <Slider />
}

API Reference

Name	Type	Default	Description
Name`value`	Type`number[]`	Default`—`	DescriptionThe controlled value array (e.g., [50] or [20, 80]).
Name`defaultValue`	Type`number[]`	Default`[0]`	DescriptionThe default value array.
Name`min`	Type`number`	Default`0`	DescriptionThe minimum allowed value.
Name`max`	Type`number`	Default`100`	DescriptionThe maximum allowed value.
Name`step`	Type`number`	Default`1`	DescriptionThe increment/decrement step.
Name`disabled`	Type`boolean`	Default`false`	DescriptionWhether the slider is disabled.
Name`label`	Type`string`	Default`—`	DescriptionAn optional textual label.
Name`showValue`	Type`boolean`	Default`false`	DescriptionWhether to display the exact selected value.