Default

Drag the thumb or click on the track to feel the slider's motion.

View on npm

Open in Cursor Open in v0

Sizes

Available in three sizes: sm, md, and lg.

Dark theme

Customize colors with CSS custom properties for dark mode or any theme.

Border, fill, thumb, and label colors can be customized
via CSS variables for seamless theme integration.

How to use in your project

Install the package and add the component to your React app. Requires Tailwind CSS and the peer dependencies listed below.

Installation

Install the package and peer dependencies. Ensure Tailwind CSS is configured and the package is included in your Tailwind content path.

Bashterminal

# Core package
npm install @sametozkale/slider-one

# Peer dependency
npm install framer-motion

React

Compose the slider with the root, track, progress, thumb, and label exports. The motion layer and keyboard support are already included.

Reactradius-control.tsx

import { useState } from "react";
import {
  Slider,
  SliderLabel,
  SliderProgress,
  SliderThumb,
  SliderTrack,
} from "@sametozkale/slider-one";

function RadiusControl() {
  const [radius, setRadius] = useState(28);

  return (
    <Slider
      min={0}
      max={64}
      step={1}
      value={radius}
      onValueChange={setRadius}
      aria-label="Radius"
      size="md"
      tokens={{
        trackHeight: "36px",
        trackRadius: "12px",
        trackBg: "#f2f2f2",
        trackBorder: "#f2f2f2",
        progressBg: "#ffffff",
        labelBg: "rgba(23, 24, 26, 0.96)",
        labelText: "#ffffff",
        labelMuted: "rgba(255, 255, 255, 0.68)",
        focusRing: "rgba(23, 24, 26, 0.1)",
      }}
    >
      <SliderTrack>
        <SliderLabel label="Radius" formatter={(value) => `${value}px`} />
        <SliderProgress leftLabel="Radius" />
        <SliderThumb />
      </SliderTrack>
    </Slider>
  );
}

Tailwind CSS

Add the package dist files as a source so Tailwind keeps the generated utility classes used inside the package.

CSSapp.css

@import "tailwindcss";

@source "../node_modules/@sametozkale/slider-one/dist/**/*.js";

Customization

Use CSS custom properties to align the component with your brand, dark mode, or a specific product surface.

CSSslider-demo.css

.slider-demo {
  --so-track-bg: transparent;
  --so-track-border: #f2f2f2;
  --so-progress-bg: #ffffff;
}