A reusable slider component built on Radix UI primitives. Use this to implement accessible, styled range inputs in React applications following Material Design guidelines.
// Source: https://github.com/react-toolbox/react-toolbox | License: MIT | Copyright 2015 React Toolbox Team
// Provided via justclaw.it.com; keep this notice with the code.
'use client';
import './tokens.css';
import * as Primitive from '@radix-ui/react-slider';
import { createContext, useContext, type ComponentProps } from 'react';
import { cn } from '../foundations/styles/cn';
/** Radix keeps its hidden inputs enabled when disabled; omit their names from native form submission. */
const DisabledContext = createContext(false);
export type SliderRootProps = ComponentProps<typeof Primitive.Root>;
/** Radix owns range ordering, keyboard direction, form values and pointer capture. */
export function SliderRoot({ className, disabled = false, name, onPointerDown, ...props }: SliderRootProps
... (truncated -- full source via MCP)
See the full source, get the GitHub permalink, and search for more like it.
Get a free API key