Component reference
Slider
Adjust a price filter with visible numeric feedback.
Preview
Live previewOptional six-digit hex. Clear to restore the preset. Check contrast with your brand color.
Changes apply to this preview only.
Width adapts to the available space
"use client";
import { useState } from "react";
import { Slider } from "@pimolu/react";
function PriceFilter() {
const [max, setMax] = useState(240);
return (
<Slider
label="Maximum price"
variant="danger"
min={40}
max={500}
step={20}
value={max}
onValueChange={setMax}
showValue
formatValue={(value) => `${value} €`}
helperText="Drag to set the budget ceiling."
/>
);
}
export function DemoExample() {
return (<PriceFilter />);
}More examples
Different configurations and compositions using the real Pimolu API. Each preview runs independently and follows the site appearance.
Sizes
The size drives the track height, the thumb and the gap.
Variants
The variant sets the tone of the filled part of the track.
States
Disabled, invalid, with or without a readout.
Usage
Keep bounds and step meaningful for the task; do not force fine precision through pointer dragging alone.
API reference
Generated from the public TypeScript declarations. Native HTML attributes are inherited where the component extends them; this reference includes Pimolu props and selected common native attributes.
PimoluSliderProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
size | "sm" | "md" | "lg" | undefined | "md" | Visual size of the track and thumb. |
variant | "primary" | "secondary" | "neutral" | "success" | "warning" | "danger" | undefined | "primary" | Tone of the filled part of the track. |
label | string | undefined | — | Visible label. |
helperText | string | undefined | — | Supporting text below the field. |
errorMessage | string | undefined | — | Error text, replacing helper text. |
invalid | boolean | undefined | false | Explicit invalid state. |
min | number | undefined | 0 | Lower bound. |
max | number | undefined | 100 | Upper bound. |
step | number | undefined | 1 | Increment between two reachable values. |
value | number | undefined | — | Controlled value. |
defaultValue | number | undefined | — | Initial uncontrolled value. |
onValueChange | ((value: number) => void) | undefined | — | Called with the new numeric value. |
showValue | boolean | undefined | false | Display the current value next to the label. |
formatValue | ((value: number) => string) | undefined | — | Formats the displayed value, for example (value) => `${value}%`. |
containerClassName | string | undefined | — | Class applied to the outer container. |
containerStyle | CSSProperties | undefined | — | Style applied to the outer container. |
className | string | undefined | — | Standard React/HTML attribute. |
style | CSSProperties | undefined | — | Standard React/HTML attribute. |
aria-label | string | undefined | — | Defines a string value that labels the current element. |
children | ReactNode | — | Standard React/HTML attribute. |
onClick | MouseEventHandler<HTMLInputElement> | undefined | — | Standard React/HTML attribute. |
disabled | boolean | undefined | false | Standard React/HTML attribute. |
name | string | undefined | — | Standard React/HTML attribute. |
required | boolean | undefined | false | Standard React/HTML attribute. |
size"sm" | "md" | "lg" | undefinedDefault: "md"
Visual size of the track and thumb.
variant"primary" | "secondary" | "neutral" | "success" | "warning" | "danger" | undefinedDefault: "primary"
Tone of the filled part of the track.
labelstring | undefinedNo default extracted.
Visible label.
helperTextstring | undefinedNo default extracted.
Supporting text below the field.
errorMessagestring | undefinedNo default extracted.
Error text, replacing helper text.
invalidboolean | undefinedDefault: false
Explicit invalid state.
minnumber | undefinedDefault: 0
Lower bound.
maxnumber | undefinedDefault: 100
Upper bound.
stepnumber | undefinedDefault: 1
Increment between two reachable values.
valuenumber | undefinedNo default extracted.
Controlled value.
defaultValuenumber | undefinedNo default extracted.
Initial uncontrolled value.
onValueChange((value: number) => void) | undefinedNo default extracted.
Called with the new numeric value.
showValueboolean | undefinedDefault: false
Display the current value next to the label.
formatValue((value: number) => string) | undefinedNo default extracted.
Formats the displayed value, for example (value) => `${value}%`.
containerClassNamestring | undefinedNo default extracted.
Class applied to the outer container.
containerStyleCSSProperties | undefinedNo default extracted.
Style applied to the outer container.
classNamestring | undefinedNo default extracted.
Standard React/HTML attribute.
styleCSSProperties | undefinedNo default extracted.
Standard React/HTML attribute.
aria-labelstring | undefinedNo default extracted.
Defines a string value that labels the current element.
childrenReactNodeNo default extracted.
Standard React/HTML attribute.
onClickMouseEventHandler<HTMLInputElement> | undefinedNo default extracted.
Standard React/HTML attribute.
disabledboolean | undefinedDefault: false
Standard React/HTML attribute.
namestring | undefinedNo default extracted.
Standard React/HTML attribute.
requiredboolean | undefinedDefault: false
Standard React/HTML attribute.
Accessibility
- Verify arrow keys and Home/End, and offer a typed alternative for exact amounts when needed.