# Digitexa UI > Open-source, copy-paste React components for dense, warm desktop interfaces (Next.js, Tailwind CSS v4, Radix). Components are installed as source files with the `dx` CLI and styled only with semantic --dx-* tokens. ## slider Radix slider with one or two thumbs for single values and ranges, labelled per thumb. Install: `curl -fsSL https://ui.digitexa.com/dx.mjs | node --input-type=module - add slider` Also adds: utils, theme npm: @radix-ui/react-slider@^1.6.1 ```tsx import { Slider } from "@/components/ui/slider"; ``` ### Example ```tsx import * as React from "react"; import { Label } from "@/components/ui/label"; import { Slider } from "@/components/ui/slider"; export default function Demo() { const [estimate, setEstimate] = React.useState([5]); const [budget, setBudget] = React.useState([20, 60]); return (

Story points {estimate[0]} pts

Weekly hours per member {budget[0]}–{budget[1]} h

Sprint capacity (locked)

); } ``` ### Source: ui/slider.tsx ```tsx "use client"; import * as React from "react"; import * as SliderPrimitive from "@radix-ui/react-slider"; import { cn } from "@/lib/utils"; /** * Pass one value for a single thumb, two for a range: . * Name each thumb with `thumbLabels` (or `aria-label` / `aria-labelledby` for a single one). */ type SliderProps = React.ComponentProps & { thumbLabels?: string[]; }; function Slider({ className, value, defaultValue, min = 0, max = 100, thumbLabels, "aria-label": ariaLabel, "aria-labelledby": labelledBy, ...props }: SliderProps) { const count = (value ?? defaultValue ?? [min]).length; return ( {Array.from({ length: count }, (_, i) => ( ))} ); } export { Slider, type SliderProps }; ```

Slider

Installation

Usage

Slider

Installation

Usage