Range slider
Two thumbs on one track choosing a low and a high value; neither passes the other.
Price
forSlots(RangeSliderSlots)(Recipes.RangeSlider({}))
Usage
The function that drew the preview, over the theme module Create a theme writes. The preview passes it the style picked above instead of its default.
export const RangeSliderStyle = forSlots(RangeSliderSlots)(Recipes.RangeSlider({}))
export const rangeSlider = <Message>(
style: NamedStyle<typeof RangeSliderSlots>,
value: RangeSlider.Range,
onChange: (value: RangeSlider.Range) => Message,
h: HtmlBuilder<Message>,
): Html =>
RangeSlider.view(
{
id: 'preview-price',
label: 'Price',
value,
onChange,
min: 0,
max: 500,
step: 10,
format: amount => `$${amount}`,
thumbLabels: { low: 'Minimum price', high: 'Maximum price' },
style,
},
h,
)