Material Design Slider Component (slider/parts.tsx)

react-toolbox · packages/react-toolbox/src/material/slider/parts.tsx · typescript · MIT
ui, fw:react, fw:radix, tag:material-design

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