Slider

# Brok UI: Exposure Slider (`exposure-slider`)

An iOS-camera-style exposure (EV) control: a notched horizontal track with a draggable ticker whose nearby notches grow taller and more opaque, paired with a circular SVG ring that displays the signed exposure value. Drag, snap-to-step, and full keyboard support.

Brok UI is a Laravel Blade component registry. Installed components are plain Blade files the app owns.

## Install

```bash
php artisan ui:add exposure-slider
```

## Usage

```blade
<div class="flex min-h-40 w-full items-center justify-center rounded-lg border border-border bg-card p-8">
    <x-ui.exposure-slider class="w-full max-w-xs" />
</div>
```

## Props

- `min` (int, default `-2`) — Minimum exposure value.
- `max` (int, default `2`) — Maximum exposure value.
- `step` (float, default `0.1`) — Keyboard/drag snap increment.
- `value` (int, default `0`) — Current exposure value.
- `label` (mixed|null, default `null`) — Accessible label for the ticker; defaults to "Exposure".

## Use when

- Use when continuous adjustment or immediate visual feedback helps users choose a value.
- Building a camera-style exposure/EV control where fine analog adjustment matters more than a wide numeric range.
- Wanting a compact ring readout paired with a notched track instead of a plain filled track.

## Avoid when

- Do not use for precise values or broad ranges without good landmarks; direct entry is better when accuracy matters.
- Needing a generic numeric range with a wide min/max or a live text readout beside the track; use slider or scrubber instead.

## Anti-patterns

- Using sliders for precise or unbounded values

## Rules

- Use the `<brok:exposure-slider>` tag (or `<x-ui.exposure-slider>`) in Blade; do not rewrite the component.
- Prefer the documented props and variants over utility-class overrides; when a utility must win, use the `!` important modifier.
- Use semantic design tokens (`bg-primary`, `text-muted-foreground`), never raw colour utilities.
- Keep the `data-slot` attributes; they are the styling and test hooks.

## Links

- Docs: https://brokui.dev/docs/components/exposure-slider
- Registry JSON (files, props, contract): https://brokui.dev/r/open/exposure-slider.json

@props([
    'min' => -2,
    'max' => 2,
    'step' => 0.1,
    'value' => 0,
    'label' => null,
])

@php
    $min = (float) $min;
    $max = (float) $max;
    $step = (float) $step;
    $value = max($min, min($max, (float) $value));
    $ariaLabel = $label ? __($label) : __('Exposure');
    // Fixed strip of notches across the track.
    $notchCount = 21;
    // Ring geometry: r = 18 → circumference ≈ 113.097.
    $ringCircumference = 113.097;
@endphp

{{--
    Exposure Slider — an iOS-camera-style EV control. A notched horizontal track holds a
    draggable ticker; notches near the ticker grow taller and more opaque (computed in
    Alpine's notchStyle()), and a circular SVG ring shows |value| as a stroke-dasharray
    arc with the signed value centred inside. Positioned with the logical
    `inset-inline-start` and direction-aware pointer/keyboard math so it mirrors under
    dir="rtl". Reduced motion skips the proximity animation (still functional).
--}}
<div
    data-slot="exposure-slider"
    x-data="uiExposureSlider({ min: @js($min), max: @js($max), value: @js($value), step: @js($step), notchCount: @js($notchCount) })"
    {{ $attributes->merge(['class' => 'flex items-center gap-4']) }}
>
    {{-- Circular value ring --}}
    <div
        data-slot="exposure-slider-ring"
        aria-hidden="true"
        class="relative grid size-12 shrink-0 place-items-center text-primary"
    >
        <svg class="size-12 -rotate-90 rtl:rotate-90" viewBox="0 0 44 44" fill="none">
            <circle cx="22" cy="22" r="18" stroke="currentColor" stroke-width="2.5" class="text-muted opacity-40" />
            <circle
                cx="22"
                cy="22"
                r="18"
                stroke="currentColor"
                stroke-width="2.5"
                stroke-linecap="round"
                stroke-dasharray="{{ $ringCircumference }}"
                x-bind:style="`stroke-dashoffset: ${({{ $ringCircumference }} * (1 - ringProgress)).toFixed(3)}`"
            />
        </svg>
        <span
            class="absolute text-2xs font-semibold tabular-nums text-foreground"
            x-text="display"
        >{{ ($value > 0 ? '+' : ($value < 0 ? '−' : '')) . number_format(abs($value), 1) }}</span>
    </div>

    {{-- Notched track + ticker --}}
    <div
        data-slot="exposure-slider-control"
        @pointerdown="startDrag($event)"
        class="relative flex h-12 w-full grow cursor-pointer touch-none items-center select-none"
    >
        {{-- Notch strip --}}
        <div
            x-ref="track"
            data-slot="exposure-slider-track"
            class="relative flex h-8 w-full grow items-center justify-between"
        >
            @for ($i = 0; $i < $notchCount; $i++)
                <span
                    data-slot="exposure-slider-notch"
                    aria-hidden="true"
                    class="w-px shrink-0 rounded-full bg-foreground"
                    x-bind:style="notchStyle({{ $i }})"
                ></span>
            @endfor
        </div>

        {{-- Ticker --}}
        <span
            data-slot="exposure-slider-ticker"
            role="slider"
            tabindex="0"
            aria-orientation="horizontal"
            :aria-valuemin="min"
            :aria-valuemax="max"
            :aria-valuenow="value"
            :aria-valuetext="valueText"
            aria-label="{{ $ariaLabel }}"
            @keydown="onKey($event)"
            class="absolute top-0 block h-12 w-0.5 -translate-x-1/2 rounded-full bg-primary shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rtl:translate-x-1/2"
            x-bind:style="`inset-inline-start: ${(percent(value) * 100).toFixed(3)}%`"
        ></span>
    </div>
</div>

/**
 * Exposure Slider behavior — an iOS-camera-style exposure (EV) control.
 *
 * Holds one numeric `value`, clamped to [min, max] and snapped to `step`. The track
 * renders a fixed strip of vertical notches; each notch's height and opacity scale with
 * its proximity to the ticker (closer = taller + more opaque), computed in the
 * `notchStyle(i)` getter and applied as an inline `height`/`opacity` plus a token
 * background class on the Blade side. A circular SVG ring shows |value|/max as a
 * stroke-dasharray arc with the signed value text centred inside.
 *
 * Positioning uses the logical `inset-inline-start`, and pointer/keyboard math accounts
 * for `direction`, so the control mirrors and feels correct under `dir="rtl"`.
 *
 * Pointer listeners are added to `document` only for the duration of a drag and are
 * always removed on pointerup AND in `destroy()`, so unmounting mid-drag can't leak.
 *
 * Self-registers on `alpine:init` so import order does not matter — import this file
 * once from your bundle (e.g. resources/js/ui/index.js).
 */
document.addEventListener('alpine:init', () => {
    window.Alpine.data('uiExposureSlider', (config = {}) => ({
        min: config.min ?? -2,
        max: config.max ?? 2,
        step: config.step ?? 0.1,
        value: config.value ?? 0,
        notchCount: config.notchCount ?? 21,

        dragging: false,

        // Bound listener refs so we can remove exactly what we added.
        _move: null,
        _up: null,

        init() {
            this.value = this.clamp(this.value);
            this._move = (e) => this.onMove(e);
            this._up = () => this.endDrag();
        },

        destroy() {
            // Remove any listeners still attached if unmounted mid-drag.
            document.removeEventListener('pointermove', this._move);
            document.removeEventListener('pointerup', this._up);
        },

        get reduceMotion() {
            return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
        },

        get decimals() {
            return String(this.step).split('.')[1]?.length ?? 0;
        },

        clamp(v) {
            v = Math.round(v / this.step) * this.step;
            v = Math.min(this.max, Math.max(this.min, v));
            return this.decimals ? Number(v.toFixed(this.decimals)) : v;
        },

        /** 0..1 position of the value across the track. */
        percent(v) {
            return this.max > this.min ? (v - this.min) / (this.max - this.min) : 0;
        },

        /** Signed magnitude used by the ring arc (0..1 of |value|/max). */
        get ringProgress() {
            const span = Math.max(Math.abs(this.min), Math.abs(this.max)) || 1;
            return Math.min(1, Math.abs(this.value) / span);
        },

        /** Display string with an explicit sign, e.g. "+0.7" / "-1.3" / "0.0". */
        get display() {
            const fixed = Math.abs(this.value).toFixed(Math.max(1, this.decimals));
            const sign = this.value > 0 ? '+' : this.value < 0 ? '−' : '';
            return `${sign}${fixed}`;
        },

        get valueText() {
            return `${this.value > 0 ? '+' : ''}${this.value} EV`;
        },

        /**
         * Per-notch inline style. Notches near the ticker grow taller and more opaque;
         * far ones flatten and fade. Under reduced motion the proximity animation is
         * skipped (uniform notches), keeping the control fully functional.
         */
        notchStyle(i) {
            const notchPos = this.notchCount > 1 ? i / (this.notchCount - 1) : 0;
            if (this.reduceMotion) {
                return 'height: 60%; opacity: 0.5';
            }
            const dist = Math.abs(notchPos - this.percent(this.value)); // 0..1
            const near = Math.max(0, 1 - dist * 4); // falloff window
            const height = 35 + near * 65; // percent of the track height
            const opacity = (0.25 + near * 0.75).toFixed(3);
            return `height: ${height.toFixed(2)}%; opacity: ${opacity}`;
        },

        valueFromClientX(clientX) {
            const r = this.$refs.track.getBoundingClientRect();
            let ratio = (clientX - r.left) / r.width;
            if (getComputedStyle(this.$el).direction === 'rtl') ratio = 1 - ratio;
            ratio = Math.min(1, Math.max(0, ratio));
            return this.min + ratio * (this.max - this.min);
        },

        startDrag(e) {
            e.preventDefault();
            this.dragging = true;
            this.apply(e.clientX);
            document.addEventListener('pointermove', this._move);
            document.addEventListener('pointerup', this._up);
        },

        onMove(e) {
            this.apply(e.clientX);
        },

        apply(clientX) {
            this.value = this.clamp(this.valueFromClientX(clientX));
        },

        endDrag() {
            this.dragging = false;
            document.removeEventListener('pointermove', this._move);
            document.removeEventListener('pointerup', this._up);
        },

        onKey(e) {
            switch (e.key) {
                case 'ArrowLeft':
                case 'ArrowDown':
                    e.preventDefault();
                    this.value = this.clamp(this.value - this.step);
                    break;
                case 'ArrowRight':
                case 'ArrowUp':
                    e.preventDefault();
                    this.value = this.clamp(this.value + this.step);
                    break;
                case 'Home':
                    e.preventDefault();
                    this.value = this.min;
                    break;
                case 'End':
                    e.preventDefault();
                    this.value = this.max;
                    break;
            }
        },
    }));
});