Component reference
RangeSlider
Set a lower and upper price boundary.
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 { RangeSlider, Badge } from "@pimolu/react";
function PriceBracket() {
const [range, setRange] = useState<[
number,
number
]>([
40,
180,
]);
return (
<div className="grid gap-5 min-w-0">
<RangeSlider
label="Price bracket"
min={0}
max={400}
step={10}
value={range}
onValueChange={setRange}
showValue
formatValue={([lower, upper]) => `${lower} € \u2013 ${upper} €`}
/>
<div className="flex flex-wrap items-center gap-3 min-w-0">
<span className="text-sm text-muted leading-relaxed">Active filter</span>
<Badge appearance="soft">
{range[0]} € \u2013 {range[1]} €
</Badge>
</div>
</div>
);
}
export function DemoExample() {
return (<PriceBracket />);
}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, the two thumbs and the gap.
Variants
The variant sets the tone of the selected segment.
States
Disabled, invalid, formatted readout, custom step.
Usage
Keep formatting and numeric state separate, and validate the allowed range in your application.
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.
PimoluRangeSliderProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
size | "sm" | "md" | "lg" | undefined | "md" | Visual size of the track and the two thumbs. |
variant | "primary" | "secondary" | "neutral" | "success" | "warning" | "danger" | undefined | "primary" | Tone of the selected segment. |
label | string | undefined | — | Visible label for the pair of handles. |
helperText | string | undefined | — | Supporting text below the control. |
errorMessage | string | undefined | — | Error text, replacing the helper text. |
invalid | boolean | undefined | false | Explicit invalid state. |
min | number | undefined | 0 | Lower bound of the whole range. |
max | number | undefined | 100 | Upper bound of the whole range. |
step | number | undefined | 1 | Increment between two reachable values. |
value | PimoluRangeSliderValue | undefined | — | Controlled pair, [lower, upper]. |
defaultValue | PimoluRangeSliderValue | undefined | — | Initial uncontrolled pair, [lower, upper]. |
onValueChange | ((value: PimoluRangeSliderValue) => void) | undefined | — | Called with the new pair, always ordered lower first. |
showValue | boolean | undefined | false | Display the current pair next to the label. |
formatValue | ((value: PimoluRangeSliderValue) => string) | undefined | — | Formats the displayed pair. |
minLabel | string | undefined | "Minimum" | Accessible name of the lower handle. |
maxLabel | string | undefined | "Maximum" | Accessible name of the upper handle. |
nameMin | string | undefined | — | Submitted name of the lower handle. |
nameMax | string | undefined | — | Submitted name of the upper handle. |
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 the two thumbs.
variant"primary" | "secondary" | "neutral" | "success" | "warning" | "danger" | undefinedDefault: "primary"
Tone of the selected segment.
labelstring | undefinedNo default extracted.
Visible label for the pair of handles.
helperTextstring | undefinedNo default extracted.
Supporting text below the control.
errorMessagestring | undefinedNo default extracted.
Error text, replacing the helper text.
invalidboolean | undefinedDefault: false
Explicit invalid state.
minnumber | undefinedDefault: 0
Lower bound of the whole range.
maxnumber | undefinedDefault: 100
Upper bound of the whole range.
stepnumber | undefinedDefault: 1
Increment between two reachable values.
valuePimoluRangeSliderValue | undefinedNo default extracted.
Controlled pair, [lower, upper].
defaultValuePimoluRangeSliderValue | undefinedNo default extracted.
Initial uncontrolled pair, [lower, upper].
onValueChange((value: PimoluRangeSliderValue) => void) | undefinedNo default extracted.
Called with the new pair, always ordered lower first.
showValueboolean | undefinedDefault: false
Display the current pair next to the label.
formatValue((value: PimoluRangeSliderValue) => string) | undefinedNo default extracted.
Formats the displayed pair.
minLabelstring | undefinedDefault: "Minimum"
Accessible name of the lower handle.
maxLabelstring | undefinedDefault: "Maximum"
Accessible name of the upper handle.
nameMinstring | undefinedNo default extracted.
Submitted name of the lower handle.
nameMaxstring | undefinedNo default extracted.
Submitted name of the upper handle.
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
- Name both endpoints and provide an understandable numeric value, including units.