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>
}