Components
Slider
A range slider, wrapping Morphos's Slider primitive.
Installation
npx kosmesis add sliderpnpm dlx kosmesis add slideryarn dlx kosmesis add sliderbunx kosmesis add sliderInstall the following dependencies:
npm install @morphos/inputspnpm add @morphos/inputsyarn add @morphos/inputsbun add @morphos/inputsCopy and paste the following code into your project.
import { StatelessComponent } from "@praxisjs/core";import { Component } from "@praxisjs/decorators";import { Slider as MorphosSlider, type SliderProps as MorphosSliderProps } from "@morphos/inputs";import { cn } from "@/lib/utils";export type SliderProps = MorphosSliderProps;/** * Morphos's `Slider` root sets `--slider-value` (a percentage) and wraps a native * `<input type="range">`. The track/range/thumb visuals below are pure CSS reading that * custom property — no extra JS. */@Component()export class Slider extends StatelessComponent<SliderProps> { render() { const { class: cls, ...rest } = this.props; return ( <MorphosSlider class={cn( "relative flex w-full touch-none select-none items-center data-[orientation=vertical]:h-full data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col", "before:absolute before:h-1.5 before:w-full before:rounded-full before:bg-muted data-[orientation=vertical]:before:h-full data-[orientation=vertical]:before:w-1.5", "after:absolute after:h-1.5 after:w-(--slider-value,0%) after:rounded-full after:bg-primary data-[orientation=vertical]:after:h-(--slider-value,0%) data-[orientation=vertical]:after:w-1.5", "[&_input]:relative [&_input]:z-10 [&_input]:h-4 [&_input]:w-full [&_input]:cursor-pointer [&_input]:appearance-none [&_input]:bg-transparent", "[&_input::-webkit-slider-thumb]:appearance-none [&_input::-webkit-slider-thumb]:size-4 [&_input::-webkit-slider-thumb]:rounded-full [&_input::-webkit-slider-thumb]:border [&_input::-webkit-slider-thumb]:border-primary [&_input::-webkit-slider-thumb]:bg-background [&_input::-webkit-slider-thumb]:shadow-sm", "data-disabled:opacity-50 [&_input:disabled]:cursor-not-allowed", cls, )} {...rest} /> ); }}Install the following dependencies:
npm install @morphos/inputs @praxisjs/csspnpm add @morphos/inputs @praxisjs/cssyarn add @morphos/inputs @praxisjs/cssbun add @morphos/inputs @praxisjs/cssCopy and paste the following code into your project.
import { StatelessComponent } from "@praxisjs/core";import { cx, Stylesheet, Styled, tokenVars } from "@praxisjs/css";import { Component } from "@praxisjs/decorators";import { Slider as MorphosSlider, type SliderProps as MorphosSliderProps } from "@morphos/inputs";import { KosmesisTokens } from "@/lib/kosmesis-theme";const t = tokenVars(KosmesisTokens);class SliderStyles extends Stylesheet { $root = this.css({ position: "relative", display: "flex", width: "100%", touchAction: "none", userSelect: "none", alignItems: "center" }) .on('&[data-orientation="vertical"]', { height: "100%", width: "auto", flexDirection: "column" }) .before({ position: "absolute", height: "0.375rem", width: "100%", borderRadius: "9999px", backgroundColor: t.muted, content: '""' }) .on('&[data-orientation="vertical"]::before', { height: "100%", width: "0.375rem" }) .after({ position: "absolute", height: "0.375rem", width: "var(--slider-value, 0%)", borderRadius: "9999px", backgroundColor: t.primary, content: '""' }) .on('&[data-orientation="vertical"]::after', { height: "var(--slider-value, 0%)", width: "0.375rem" }) .on("&[data-disabled]", { opacity: 0.5 }) .on("& input", { position: "relative", zIndex: 10, height: "1rem", width: "100%", cursor: "pointer", appearance: "none", backgroundColor: "transparent" }) .on("& input:disabled", { cursor: "not-allowed" }) .on("& input::-webkit-slider-thumb", { appearance: "none", width: "1rem", height: "1rem", borderRadius: "9999px", border: `1px solid ${t.primary}`, backgroundColor: t.background, boxShadow: "0 1px 2px 0 rgb(0 0 0 / 0.05)", });}export type SliderProps = MorphosSliderProps;/** * Morphos's `Slider` root sets `--slider-value` (a percentage) and wraps a native * `<input type="range">`. The track/range/thumb visuals below are pure CSS reading that * custom property — no extra JS. */@Component()export class Slider extends StatelessComponent<SliderProps> { @Styled(SliderStyles) $s!: SliderStyles; render() { const { class: cls, ...rest } = this.props; return <MorphosSlider class={cx(this.$s.$root, cls)} {...rest} />; }}Examples
Usage
import { Slider } from "@/components/ui/slider";
<Slider defaultValue={50} max={100} step={1} class="w-64" />Props
Passes through to Morphos's Slider.
| Prop | Type | Default |
|---|---|---|
value / defaultValue | number | — |
min / max / step | number | — |
disabled | boolean | — |
name | string | — |
orientation | "horizontal" | "vertical" | — |
onValueChange | (value: number) => void | — |