Slider

Input component for selecting a value from a range. Built on Radix UI.

Installation

# Install @opencosmos/ui to use Slider
pnpm add @opencosmos/ui

Preview

Loading preview...

Customize

min— Minimum value

max— Maximum value

step— Step increment

defaultValue— Default value

Usage

Import

import { Slider } from '@opencosmos/ui';

Example

<Slider>
  Content
</Slider>

Eject

Copy this component into your project for full customization

API Reference

Prop	Type	Default	Description
min	text	"0"	Minimum value
max	text	"100"	Maximum value
step	text	"1"	Step increment
defaultValue	array	[50]	Default value

Range slider with default value

import { Slider } from "@opencosmos/ui"

<Slider defaultValue={[50]} max={100} step={1} />