Slider

Solidtype_heroui.Slider is Kobalte’s Slider.Root, with the classes HeroUI’s own sliderVariants gives. Its values – one, or two for a range – are chosen by its thumbs, Kobalte’s, by a pointer or the arrow, page, Home and End keys, on its step’s grid within its range. Its output and fill are drawn from its values as React Aria draws them, and each thumb is placed as React Aria places it, centred across the track, which HeroUI’s styles count on.

Usage

Volume

30

slider_usage.mlx

module Label = Solidtype_heroui.Label
module Slider = Solidtype_heroui.Slider

let make () =
  <Slider class_="w-full max-w-xs" default_value=(fun () -> [| 30. |])>
    <Label>"Volume"</Label>
    <Slider.Output />
    <Slider.Track><Slider.Fill /> <Slider.Thumb /></Slider.Track>
  </Slider>

Anatomy

<Slider default_value=(fun () -> [| 25.; 75. |])>
  <Label>"Range"</Label>
  <Slider.Output />
  <Slider.Track>
    <Slider.Fill />
    <Slider.Thumb index=0 />
    <Slider.Thumb index=1 />
  </Slider.Track>
</Slider>

Examples

Disabled

Volume

30

slider_disabled.mlx

module Label = Solidtype_heroui.Label
module Slider = Solidtype_heroui.Slider

let make () =
  <Slider
    class_="w-full max-w-xs"
    default_value=(fun () -> [| 30. |])
    is_disabled=true>
    <Label>"Volume"</Label>
    <Slider.Output />
    <Slider.Track><Slider.Fill /> <Slider.Thumb /></Slider.Track>
  </Slider>

Vertical

Volume

30

slider_vertical.mlx

module Label = Solidtype_heroui.Label
module Slider = Solidtype_heroui.Slider

let make () =
  <div class_="flex h-64 items-center justify-center">
    <Slider
      class_="h-full" default_value=(fun () -> [| 30. |]) orientation=`vertical>
      <Label>"Volume"</Label>
      <Slider.Output />
      <Slider.Track><Slider.Fill /> <Slider.Thumb /></Slider.Track>
    </Slider>
  </div>

Range

Each thumb of a range is bounded, for a reader, by its neighbours.

Price Range

100 – 500

slider_range.mlx

module Label = Solidtype_heroui.Label
module Slider = Solidtype_heroui.Slider

let make () =
  <Slider
    class_="w-full max-w-xs"
    default_value=(fun () -> [| 100.; 500. |])
    max_value=1000.
    min_value=0.
    step=50.>
    <Label>"Price Range"</Label>
    <Slider.Output />
    <Slider.Track>
      <Slider.Fill /> <Slider.Thumb index=0 /> <Slider.Thumb index=1 />
    </Slider.Track>
  </Slider>

Controlled Value

Volume

25

Current value: 25

slider_controlled.mlx

module S = Solidtype.Solid
module Jsx = Solidtype.Jsx
module Label = Solidtype_heroui.Label
module Slider = Solidtype_heroui.Slider

let make () =
  let value, set_value = S.create_signal [| 25. |] in
  <div class_="flex w-full max-w-xs flex-col gap-4">
    <Slider value=(fun () -> S.get value) on_change=(S.set set_value)>
      <Label>"Volume"</Label>
      <Slider.Output />
      <Slider.Track><Slider.Fill /> <Slider.Thumb /></Slider.Track>
    </Slider>
    <p class_="text-sm text-muted">
      (fun () ->
        Jsx.string
          ("Current value: "
          ^ String.concat ", "
              (Array.to_list (Array.map Js.Float.toString (S.get value)))))
    </p>
  </div>

Custom Output

Slider.Output’s children take the place of its values.

Range

25% to 75%

slider_custom_output.mlx

module S = Solidtype.Solid
module Jsx = Solidtype.Jsx
module Label = Solidtype_heroui.Label
module Slider = Solidtype_heroui.Slider

let make () =
  let values, set_values = S.create_signal [| 25.; 75. |] in
  <Slider
    class_="w-full max-w-xs"
    value=(fun () -> S.get values)
    on_change=(S.set set_values)>
    <Label>"Range"</Label>
    <Slider.Output>
      (fun () ->
        match S.get values with
        | [| low; high |] ->
            Jsx.string
              (Js.Float.toString low ^ "% to " ^ Js.Float.toString high ^ "%")
        | _ -> Jsx.string "")
    </Slider.Output>
    <Slider.Track>
      <Slider.Fill /> <Slider.Thumb index=0 /> <Slider.Thumb index=1 />
    </Slider.Track>
  </Slider>

Custom Value Formatting

format_options formats each value the output shows and each thumb tells a reader, by Kobalte’s number formatter in the reader’s locale, a decimal by default.

Price

$200.00 – $800.00

slider_format.mlx

module Label = Solidtype_heroui.Label
module Slider = Solidtype_heroui.Slider
module Format = Solidtype_kobalte.Types.NumberFormatOptions

let make () =
  <Slider
    class_="w-64"
    default_value=(fun () -> [| 200.; 800. |])
    max_value=1000.
    format_options=(fun () -> Format.make ~style:`currency ~currency:"USD" ())>
    <Label>"Price"</Label>
    <Slider.Output />
    <Slider.Track>
      <Slider.Fill /> <Slider.Thumb index=0 /> <Slider.Thumb index=1 />
    </Slider.Track>
  </Slider>

Styling Reference

CSS Classes

• .slider, .slider__output, .slider__track, .slider__fill, .slider__thumb

Interactive States

• Orientation: [data-orientation="horizontal"], [data-orientation="vertical"]
• Disabled: [data-disabled="true"]
• Filled: [data-fill-start="true"], [data-fill-end="true"] on the track
• Thumb: [data-focused="true"], [data-focus-visible="true"], [data-hovered="true"], [data-dragging="true"]

API Reference

Each prop beside the name HeroUI’s React component gives it.

Slider

React	solidtype	Type	Default	Description
value	value	float array		Its values, controlled
defaultValue	default_value	float array	[| min_value |]	Its values at first, kept by itself
onChange	on_change	float array -> unit		Told its values as they change
onChangeEnd	on_change_end	float array -> unit		Told its values as a drag ends
minValue	min_value	float	0.	The least value
maxValue	max_value	float	100.	The greatest value
step	step	float	1.	How far a key steps
orientation	orientation	[ `horizontal | `vertical ]	`horizontal	Its direction
isDisabled	is_disabled	bool		Whether it is disabled, else as its fieldset is
name	name	string		Its name in a form
aria-label	aria_label	string		Its name where no label names it
className	class_	string		Added after HeroUI’s classes
onBlur	on_blur	Dom.focusEvent -> unit		Called once focus leaves its thumbs for an element outside it; React’s Slider has none
formatOptions	format_options	Solidtype_kobalte.Types.NumberFormatOptions.t	a decimal	How its values are shown

Slider.Thumb

React	solidtype	Type	Default	Description
index	index	int	0	Which value it moves
className	class_	string		Added after HeroUI’s class
children	children	elements		Drawn inside it

Slider.Output, Slider.Track, Slider.Fill

Each takes class_, added after HeroUI’s class; the output children, in place of its values.

Beside React

Original HeroUI documentation: Slider.

The same HeroUI Slider twice, under the same props: in solidtype on the left, in React on the right. Below them, every attribute of the two thumbs: a marked row is one they disagree on – Kobalte’s thumb is a slider, where React Aria’s holds a range input.

disabled

solidtype — OCaml, on Solid and Kobalte

Volume

30

React — TypeScript, on React Aria

attribute	solidtype	React