Slider

package slider import (	"fmt"	"strconv" 	"github.com/axadrn/shadcn-templ/v2/utils") type Orientation string const (	OrientationHorizontal Orientation = "horizontal"	OrientationVertical   Orientation = "vertical") type Props struct {	ID         string	Class      string	Attributes templ.Attributes	// Value are the initial thumb values, one thumb per value. Nil renders	// a thumb at Min and one at Max (Base UI's default).	Value []float64	Min    float64	// Max defaults to 100.	Max float64	// Step defaults to 1.	Step float64	// Orientation defaults to horizontal.	Orientation Orientation	// Name submits the values in forms, one hidden input per thumb.	Name     string	Disabled bool} // thumbSize is size-3 in px; Base UI's edge thumb alignment keeps the thumb// inside the track by shifting it up to its own width.const thumbSize = 12 func fmtF(v float64) string {	return strconv.FormatFloat(v, 'f', -1, 64)} func fraction(v, min, max float64) float64 {	if max == min {		return 0	}	f := (v - min) / (max - min)	if f < 0 {		f = 0	}	if f > 1 {		f = 1	}	return f} // thumbStyle positions the thumb edge aligned: offset = f * (100% - thumb).// Horizontal grows from the left, vertical from the bottom.func thumbStyle(f float64, vertical bool) string {	if vertical {		g := 1 - f		return fmt.Sprintf("position:absolute;top:calc(%.4f%% - %.2fpx);left:50%%;transform:translateX(-50%%)", g*100, g*thumbSize)	}	return fmt.Sprintf("position:absolute;left:calc(%.4f%% - %.2fpx);top:50%%;transform:translateY(-50%%)", f*100, f*thumbSize)} // indicatorStyle spans from the start (one thumb) or between the outer thumb// centers (multiple thumbs).func indicatorStyle(fs []float64, vertical bool) string {	lo, hi := 0.0, 0.0	if len(fs) == 1 {		hi = fs[0]	} else if len(fs) > 1 {		lo, hi = fs[0], fs[len(fs)-1]		for _, f := range fs {			if f < lo {				lo = f			}			if f > hi {				hi = f			}		}	}	if vertical {		if len(fs) > 1 {			return fmt.Sprintf("position:absolute;left:0;bottom:calc(%.4f%% + %.2fpx);height:calc(%.4f%% - %.2fpx)",				lo*100, thumbSize/2.0-lo*thumbSize, (hi-lo)*100, (hi-lo)*thumbSize)		}		return fmt.Sprintf("position:absolute;left:0;bottom:0;height:calc(%.4f%% + %.2fpx)", hi*100, thumbSize/2.0-hi*thumbSize)	}	if len(fs) > 1 {		return fmt.Sprintf("position:absolute;top:0;left:calc(%.4f%% + %.2fpx);width:calc(%.4f%% - %.2fpx)",			lo*100, thumbSize/2.0-lo*thumbSize, (hi-lo)*100, (hi-lo)*thumbSize)	}	return fmt.Sprintf("position:absolute;top:0;left:0;width:calc(%.4f%% + %.2fpx)", hi*100, thumbSize/2.0-hi*thumbSize)} templ Slider(props ...Props) {	{{ var p Props }}	if len(props) > 0 {		{{ p = props[0] }}	}	if p.ID == "" {		{{ p.ID = utils.RandomID() }}	}	if p.Max == 0 {		{{ p.Max = 100 }}	}	if p.Step == 0 {		{{ p.Step = 1 }}	}	if p.Orientation == "" {		{{ p.Orientation = OrientationHorizontal }}	}	if p.Value == nil {		{{ p.Value = []float64{p.Min, p.Max} }}	}	{{		vertical := p.Orientation == OrientationVertical		fs := make([]float64, len(p.Value))		for i, v := range p.Value {			fs[i] = fraction(v, p.Min, p.Max)		}	}}	// slider.js reads the bare data-vertical flag; the data-horizontal:/	// data-vertical: variants match data-orientation (shadcn-tailwind.css).	<div		id={ p.ID }		data-slot="slider"		data-tui-slider		data-orientation={ string(p.Orientation) }		if vertical {			data-vertical		} else {			data-horizontal		}		data-min={ fmtF(p.Min) }		data-max={ fmtF(p.Max) }		data-step={ fmtF(p.Step) }		if p.Disabled {			data-disabled		}		class={ utils.CN("data-horizontal:w-full data-vertical:h-full", p.Class) }		{ p.Attributes... }	>		if p.Name != "" {			for _, v := range p.Value {				<input type="hidden" name={ p.Name } value={ fmtF(v) } data-tui-slider-input aria-hidden="true" tabindex="-1"/>			}		}		<div			data-tui-slider-control			data-orientation={ string(p.Orientation) }			if p.Disabled {				data-disabled			}			class="cn-slider relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:w-auto data-vertical:flex-col"		>			<div				data-slot="slider-track"				data-tui-slider-track				data-orientation={ string(p.Orientation) }				class="cn-slider-track relative grow overflow-hidden select-none"			>				<div					data-slot="slider-range"					data-tui-slider-range					data-orientation={ string(p.Orientation) }					class="cn-slider-range select-none data-horizontal:h-full data-vertical:w-full"					style={ indicatorStyle(fs, vertical) }				></div>			</div>			for i, v := range p.Value {				// The thumb's disabled:* classes are dead CSS on a div, exactly				// like in shadcn's thumb: only the control dims to 50%.				<div					data-slot="slider-thumb"					data-tui-slider-thumb					role="slider"					tabindex={ utils.IfElse(p.Disabled, "-1", "0") }					aria-valuemin={ fmtF(p.Min) }					aria-valuemax={ fmtF(p.Max) }					aria-valuenow={ fmtF(v) }					if vertical {						aria-orientation="vertical"					}					if p.Disabled {						data-disabled						aria-disabled="true"					}					style={ thumbStyle(fs[i], vertical) }					class="cn-slider-thumb block shrink-0 select-none disabled:pointer-events-none disabled:opacity-50"				></div>			}		</div>	</div>}

(function () {  "use strict";   // size-3 in px; Base UI's edge thumb alignment keeps the thumb inside the  // track by shifting it up to its own width. Mirrors slider.templ.  const THUMB = 12;   function config(root) {    return {      min: parseFloat(root.getAttribute("data-min") || "0"),      max: parseFloat(root.getAttribute("data-max") || "100"),      step: parseFloat(root.getAttribute("data-step") || "1") || 1,      vertical: root.hasAttribute("data-vertical"),    };  }   function thumbsOf(root) {    return [...root.querySelectorAll("[data-tui-slider-thumb]")];  }   function valuesOf(root) {    return thumbsOf(root).map((t) => parseFloat(t.getAttribute("aria-valuenow") || "0"));  }   function fraction(v, c) {    if (c.max === c.min) return 0;    return Math.min(1, Math.max(0, (v - c.min) / (c.max - c.min)));  }   function decimals(step) {    const s = String(step);    const i = s.indexOf(".");    return i === -1 ? 0 : s.length - i - 1;  }   function render(root) {    const c = config(root);    const values = valuesOf(root);    thumbsOf(root).forEach((t, i) => {      const f = fraction(values[i], c);      if (c.vertical) {        const g = 1 - f;        t.style.top = "calc(" + (g * 100).toFixed(4) + "% - " + (g * THUMB).toFixed(2) + "px)";      } else {        t.style.left = "calc(" + (f * 100).toFixed(4) + "% - " + (f * THUMB).toFixed(2) + "px)";      }    });    const range = root.querySelector("[data-tui-slider-range]");    if (range) {      const fs = values.map((v) => fraction(v, c));      const lo = values.length > 1 ? Math.min(...fs) : 0;      const hi = values.length > 0 ? Math.max(...fs) : 0;      if (c.vertical) {        if (values.length > 1) {          range.style.bottom = "calc(" + (lo * 100).toFixed(4) + "% + " + (THUMB / 2 - lo * THUMB).toFixed(2) + "px)";          range.style.height = "calc(" + ((hi - lo) * 100).toFixed(4) + "% - " + ((hi - lo) * THUMB).toFixed(2) + "px)";        } else {          range.style.bottom = "0";          range.style.height = "calc(" + (hi * 100).toFixed(4) + "% + " + (THUMB / 2 - hi * THUMB).toFixed(2) + "px)";        }      } else {        if (values.length > 1) {          range.style.left = "calc(" + (lo * 100).toFixed(4) + "% + " + (THUMB / 2 - lo * THUMB).toFixed(2) + "px)";          range.style.width = "calc(" + ((hi - lo) * 100).toFixed(4) + "% - " + ((hi - lo) * THUMB).toFixed(2) + "px)";        } else {          range.style.left = "0";          range.style.width = "calc(" + (hi * 100).toFixed(4) + "% + " + (THUMB / 2 - hi * THUMB).toFixed(2) + "px)";        }      }    }    root.querySelectorAll("[data-tui-slider-input]").forEach((input, i) => {      if (values[i] != null) input.value = String(values[i]);    });  }   function snap(v, c) {    const stepped = Math.round((v - c.min) / c.step) * c.step + c.min;    const clamped = Math.min(c.max, Math.max(c.min, stepped));    return parseFloat(clamped.toFixed(decimals(c.step)));  }   function setValue(root, index, v) {    const c = config(root);    const values = valuesOf(root);    v = snap(v, c);    // Thumbs cannot cross each other (Base UI clamps at the neighbor).    if (index > 0) v = Math.max(v, values[index - 1]);    if (index < values.length - 1) v = Math.min(v, values[index + 1]);    if (values[index] === v) return;    thumbsOf(root)[index].setAttribute("aria-valuenow", String(v));    render(root);    root.dispatchEvent(new CustomEvent("slider-change", { bubbles: true, detail: { values: valuesOf(root) } }));  }   // Inverts the edge alignment: the usable span is the track minus one thumb.  function valueFromPointer(root, e) {    const c = config(root);    const track = root.querySelector("[data-tui-slider-track]");    const rect = track.getBoundingClientRect();    let f;    if (c.vertical) {      const usable = rect.height - THUMB;      f = usable <= 0 ? 0 : (rect.bottom - THUMB / 2 - e.clientY) / usable;    } else {      const usable = rect.width - THUMB;      f = usable <= 0 ? 0 : (e.clientX - rect.left - THUMB / 2) / usable;    }    return c.min + Math.min(1, Math.max(0, f)) * (c.max - c.min);  }   function nearestThumb(root, v) {    const values = valuesOf(root);    let best = 0;    let bestDist = Infinity;    values.forEach((val, i) => {      const d = Math.abs(val - v);      // On a tie the upper thumb moves when pressing above it.      if (d < bestDist || (d === bestDist && v > val)) {        best = i;        bestDist = d;      }    });    return best;  }   let drag = null; // { root, index }   document.addEventListener("pointerdown", (e) => {    if (e.button !== 0 || !(e.target instanceof Element)) return;    const control = e.target.closest("[data-tui-slider-control]");    if (!control) return;    const root = control.closest("[data-tui-slider]");    if (!root || root.hasAttribute("data-disabled")) return;    e.preventDefault();    const v = valueFromPointer(root, e);    const pressedThumb = e.target.closest("[data-tui-slider-thumb]");    const index = pressedThumb ? thumbsOf(root).indexOf(pressedThumb) : nearestThumb(root, v);    drag = { root, index };    if (!pressedThumb) setValue(root, index, v);    thumbsOf(root)[index].focus({ preventScroll: true });  });   document.addEventListener("pointermove", (e) => {    if (!drag) return;    setValue(drag.root, drag.index, valueFromPointer(drag.root, e));  });   document.addEventListener("pointerup", () => {    drag = null;  });   document.addEventListener("keydown", (e) => {    if (!(e.target instanceof Element)) return;    const thumb = e.target.closest("[data-tui-slider-thumb]");    if (!thumb) return;    const root = thumb.closest("[data-tui-slider]");    if (!root || root.hasAttribute("data-disabled")) return;    const c = config(root);    const index = thumbsOf(root).indexOf(thumb);    const v = valuesOf(root)[index];    let next = null;    if (e.key === "ArrowRight" || e.key === "ArrowUp") next = v + c.step;    if (e.key === "ArrowLeft" || e.key === "ArrowDown") next = v - c.step;    if (e.key === "PageUp") next = v + c.step * 10;    if (e.key === "PageDown") next = v - c.step * 10;    if (e.key === "Home") next = c.min;    if (e.key === "End") next = c.max;    if (next === null) return;    e.preventDefault();    setValue(root, index, next);  });})();