PineUiPhoenix.Components.RangeSlider (Pine UI v0.2.0)

Copy Markdown View Source

A range slider.

A port of the Pines range slider. This is a native <input type="range"> styled entirely with Tailwind arbitrary variants — no JavaScript at all, unless you opt into show_value.

The filled portion of the track is the interesting trick: Firefox exposes ::-moz-range-progress, but WebKit has no equivalent, so the fill is faked with a very large one-sided box shadow on the thumb, clipped by the track's overflow: hidden.

<.range_slider name="volume" min={0} max={100} value={50} />

Summary

Forms

range_slider(assigns)

Renders a range slider.

Forms

range_slider(assigns)

Renders a range slider.

Examples

<.range_slider name="volume" label="Volume" value={70} show_value value_suffix="%" />

<.range_slider name="price" min={0} max={1000} step={50}
               phx-change="filter" phx-debounce="200" />

Attributes

  • id (:string) - Defaults to nil.
  • name (:string) (required)
  • value (:integer) - Defaults to 50.
  • min (:integer) - Defaults to 0.
  • max (:integer) - Defaults to 100.
  • step (:integer) - Defaults to 1.
  • label (:string) - Defaults to nil.
  • hint (:string) - Defaults to nil.
  • disabled (:boolean) - Defaults to false.
  • show_value (:boolean) - Displays the live value beside the label. Requires Alpine. Defaults to false.
  • value_suffix (:string) - Appended to the displayed value, e.g. "%". Defaults to "".
  • class (:string) - Defaults to nil.
  • container_class (:string) - Defaults to nil.
  • Global attributes are accepted.