Slider

Range slider with floating tooltip, filled track, spring-animated thumb, and simple variant.

forms v0.1.0

Playground

Examples

Default (tooltip + fill)

<cg-slider label="Volume" value="60" unit="%" style="max-width: 400px;"></cg-slider>

Toggle (Apple style)

<cg-slider variant="toggle" label="Volume" value="60" unit="%" style="max-width: 400px;"></cg-slider>

Simple

<cg-slider variant="simple" label="Brightness" value="40" unit="%" style="max-width: 400px;"></cg-slider>

With range labels

<cg-slider label="Temperature" value="50" min="0" max="100" showRange unit="°" style="max-width: 400px;"></cg-slider>

Sizes

<cg-stack gap="md" style="max-width: 400px;"><cg-slider size="sm" label="Small" value="30"></cg-slider><cg-slider size="md" label="Medium" value="50"></cg-slider><cg-slider size="lg" label="Large" value="70"></cg-slider></cg-stack>

States

<cg-stack gap="md" style="max-width: 400px;"><cg-slider label="Error" error value="25"></cg-slider><cg-slider label="Success" success value="90"></cg-slider><cg-slider label="Disabled" disabled value="40"></cg-slider></cg-stack>

Import

import { CgSlider } from '@cognivo/components';

// Or tree-shake: import '@cognivo/components/cg-slider';

Per-component imports ship only that component (~8 kB gzip).

API Reference

Prop	Type	Default	Description
`variant`	"default" \| "simple" \| "toggle"	"default"	Default = thin track + tooltip; simple = plain; toggle = thick pill track
`label`	string	""	Label text above the slider
`value`	number	50	Current value
`min`	number	0	Minimum value
`max`	number	100	Maximum value
`step`	number	1	Step increment
`size`	"sm" \| "md" \| "lg"	"md"	Track and thumb size
`disabled`	boolean	false	Disable interaction
`showValue`	boolean	true	Show current value in header
`showTooltip`	boolean	true	Show floating tooltip on hover/drag
`showRange`	boolean	false	Show min/max labels below the track
`unit`	string	""	Unit suffix (e.g. "%", "px")

Events

Event	Detail	Description
`cg-change`	{value: number}	On value change