Mishka
Chelekom

Hue Slider

v0.0.10

v0.0.10StableHeadlessStatelessAccessibleJSApache-2.0
Installation mix mishka.ui.gen.headless hue_slider
Source View Source

Overview of the Phoenix and LiveView Headless Hue Slider Component

The Mishka Chelekom Headless Hue Slider picks a hue from 0 to 360 degrees. For Phoenix and LiveView it renders the headless slider markup set to that range: a control that holds a track, an indicator and one thumb with role="slider". It uses the shared Slider hook, so pointer dragging, keyboard steps and the ARIA values come from the slider and there is no extra JavaScript.

The component draws no gradient. Put the rainbow on the track with track_class, and style the other parts with control_class, thumb_class and indicator_class. The indicator is usually hidden on a hue slider.

Base UI Hue Slider example - rainbow track (Phoenix headless)

Base UI Hue Slider example - rainbow track (Phoenix headless)

heex
<div class="w-64">
  <.hue_slider
    id="baseui-hue-slider"
    value={140}
    class="block w-full [&_[data-part=control]]:relative [&_[data-part=control]]:flex [&_[data-part=control]]:h-4 [&_[data-part=control]]:cursor-pointer [&_[data-part=control]]:items-center [&_[data-part=track]]:relative [&_[data-part=track]]:h-3 [&_[data-part=track]]:w-full [&_[data-part=track]]:rounded-full [&_[data-part=track]]:[background:linear-gradient(to_right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00)] [&_[data-part=indicator]]:hidden [&_[data-part=thumb]]:size-4 [&_[data-part=thumb]]:rounded-full [&_[data-part=thumb]]:border-2 [&_[data-part=thumb]]:border-white [&_[data-part=thumb]]:shadow [&_[data-part=thumb]]:ring-1 [&_[data-part=thumb]]:ring-black/30 [&_[data-part=thumb]]:outline-none"
  />
</div>

Reading the value

Give the slider a name and the thumb holds a hidden input with that name, so the hue is submitted with the surrounding form. Use form to attach the input to a form elsewhere on the page. To follow the value in the LiveView, on_change names an event pushed on every change while the user drags or presses keys, and on_commit names one pushed when the interaction ends. Both send the hue as value.

elixir
def handle_event("set_hue", %{"value" => hue}, socket) do
  {:noreply, assign(socket, :hue, hue)}
end

Attributes and parts

value is the current hue and defaults to 0. step is the arrow-key step and defaults to 1. disabled turns off dragging and keys and sets data-disabled. label is the aria-label of the thumb and defaults to "Hue". id is required, and other global attributes are passed to the root.

The parts are control, track, indicator and thumb, each with a data-part attribute, and each takes its own *_class. class styles the root. While the user drags, the root, the control and the thumb carry data-dragging. The root also holds the CSS custom property --chelekom-slider, the position as a ratio from 0 to 1.

Accessibility

The hue slider follows the WAI-ARIA Slider pattern. The thumb has role="slider" with aria-valuemin 0, aria-valuemax 360, aria-valuenow and aria-valuetext. The arrow keys change the value by step. Shift with an arrow, PageUp and PageDown change it by 10. Home goes to 0 and End goes to 360.