Slider

A single-thumb control for picking a number within a range.

Basic

Volume

Show code

import { Slider } from "@makeplane/propel/components/slider";
import * as React from "react";

export default function BasicDemo() {
  const [value, setValue] = React.useState(40);
  return (
    <Slider
      label="Volume"
      magnitude="md"
      value={value}
      onValueChange={(next) => setValue(next as number)}
      min={0}
      max={100}
      step={1}
    />
  );
}

Magnitudes

The magnitude axis sets the thumb and hit-area size; the track bar height stays the same.

Show code

import { Slider } from "@makeplane/propel/components/slider";

export default function MagnitudesDemo() {
  return (
    <div className="flex flex-col gap-6">
      <Slider label="sm" magnitude="sm" defaultValue={40} min={0} max={100} step={1} />
      <Slider label="md" magnitude="md" defaultValue={40} min={0} max={100} step={1} />
      <Slider label="lg" magnitude="lg" defaultValue={40} min={0} max={100} step={1} />
    </div>
  );
}

Formatted value

Pass format (an Intl.NumberFormatOptions) to control the readout — here a percentage.

Opacity

60%

Show code

import { Slider } from "@makeplane/propel/components/slider";
import * as React from "react";

export default function FormattedValueDemo() {
  const [value, setValue] = React.useState(0.6);
  return (
    <Slider
      label="Opacity"
      magnitude="md"
      value={value}
      onValueChange={(next) => setValue(next as number)}
      min={0}
      max={1}
      step={0.01}
      format={{ style: "percent", maximumFractionDigits: 0 }}
    />
  );
}

Edge-aligned thumb

With thumbAlignment="edge" the thumb stays fully inside the track at the extremes instead of overhanging it.

Progress

Show code

import { Slider } from "@makeplane/propel/components/slider";
import * as React from "react";

export default function EdgeAlignedThumbDemo() {
  const [value, setValue] = React.useState(25);
  return (
    <Slider
      label="Progress"
      magnitude="md"
      value={value}
      onValueChange={(next) => setValue(next as number)}
      min={0}
      max={100}
      step={1}
      thumbAlignment="edge"
    />
  );
}

In a form

Wrap the slider in a Field with a name and its value serializes with the surrounding Form.

Show code

import { Button } from "@makeplane/propel/components/button";
import { Field } from "@makeplane/propel/components/field";
import { Form, FormActions, FormBody } from "@makeplane/propel/components/form";
import { Slider } from "@makeplane/propel/components/slider";
import * as React from "react";

export default function InAFormDemo() {
  const [submitted, setSubmitted] = React.useState<{ volume: number } | null>(null);
  return (
    <div className="flex flex-col gap-3">
      <Form<{ volume: number }> onFormSubmit={(values) => setSubmitted(values)}>
        <FormBody layout="single">
          <Field name="volume">
            <Slider label="Volume" magnitude="md" defaultValue={40} min={0} max={100} step={1} />
          </Field>
        </FormBody>
        <FormActions layout="inline">
          <Button
            sizing="hug"
            type="submit"
            prominence="primary"
            tone="neutral"
            magnitude="md"
            label="Save"
          />
        </FormActions>
      </Form>
      <output className="text-13 text-secondary">
        {submitted ? `Volume: ${submitted.volume}` : null}
      </output>
    </div>
  );
}

Installation

import { Slider } from "@makeplane/propel/components/slider";

Props

Slider

Prop	Type	Required	Description
render	ReactElement<unknown, string \| JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, SliderRootState>	No	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
label	string	No	Optional visible label rendered above the track (e.g. "Volume"). When omitted, provide an `aria-label` for the thumb so the control is still named for assistive tech.
magnitude	"sm" \| "md" \| "lg"	Yes	Thumb and control size. `sm` = 12 px thumb, `md` = 16 px, `lg` = 20 px.