Slider

Picks a number from a range by dragging a thumb along a track.

Installation

bun add elia

@import "tailwindcss";
@import "@aile.sh/elia/styles/elia.css";
@source "../node_modules/@aile.sh/elia";

Usage

import { useState } from "react";
import { Slider } from "@aile.sh/elia";

export function Example() {
  const [temperature, setTemperature] = useState(0.7);

  return (
    <Slider
      className="max-w-xs"
      label="Temperature"
      min={0}
      max={2}
      step={0.1}
      marks={[0, 1, 2]}
      showValue
      formatValue={(v) => v.toFixed(1)}
      value={temperature}
      onChange={setTemperature}
    />
  );
}

— elia design system · MIT · base · https://github.com/aile-sh/elia