Slider

Basic

// Package slider holds the site's example gsx components for ui/slider.
package slider

import "github.com/gsxhq/gsxui/ui"

// Basic mirrors shadcn's own slider-demo.tsx — the only slider example in
// the stated source directory (defaultValue={[50]} max={100} step={1},
// single thumb, w-[60%] wrapper). Range/Multiple-thumb/Vertical demos from
// the newer bases/radix examples tree are out of scope: this port's single
// <input type=range> ADAPT has no analog for them at all (GAP, see
// docs/jsx-parity.md `## slider`).
component Basic() {
	<ui.Slider value={50} min={0} max={100} step={1} class="w-[60%]" aria-label="Volume"/>
}

RTL

package slider

import "github.com/gsxhq/gsxui/ui"

// Rtl mirrors shadcn's own slider-rtl demo: the same single-thumb slider as
// Basic (value 75 here, matching shadcn's rtl demo rather than Basic's 50),
// wrapped in dir="rtl" so the native range input's own RTL handling takes
// over the thumb's visual direction.
component Rtl() {
	<div dir="rtl" lang="ar" class="mx-auto w-full max-w-xs">
		<ui.Slider value={75} min={0} max={100} step={1} class="w-full" aria-label="Volume" dir="rtl"/>
	</div>
}