@data-slot/slider 0.2.149 → 0.2.151

package/README.md

@@ -170,7 +170,8 @@ The component sets data attributes and inline styles for CSS hooks:
 /* Thumb positioning (set automatically) */
 [data-slot="slider-thumb"] {
   position: absolute;
-  /* left: X% (horizontal) or bottom: X% (vertical) */
+  /* --position: X%; inset-inline-start/top or bottom/left are applied inline */
+  /* translate is applied inline to center the thumb on the active value */
 }
 
 /* Range thumbs expose their index */
@@ -179,14 +180,20 @@ The component sets data attributes and inline styles for CSS hooks:
 
 /* Range positioning (set automatically) */
 [data-slot="slider-range"] {
-  position: absolute;
-  /* left + width (horizontal) or bottom + height (vertical) */
+  /* horizontal: relative + inset-inline-start/width */
+  /* vertical: absolute + bottom/height */
 }
 
 /* Thumb dragging state */
 [data-slot="slider-thumb"][data-dragging] { ... }
 ```
 
+`slider-track`, `slider-range`, and `slider-thumb` also get Base-style inline layout
+styles from the controller. The runtime owns the track's `position: relative`, the
+range's start/size positioning, and the thumb's absolute position / translate, so
+authors only need to supply visual styles unless they intentionally want to override
+that layout behavior.
+
 ## Accessibility
 
 Each thumb element receives:

package/dist/index.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require(`@data-slot/core`);const t=[`horizontal`,`vertical`],n=`@data-slot/slider`;function r(e){if(!e)return;let t=e.split(`,`).map(e=>parseFloat(e.trim()));if(!t.some(e=>isNaN(e))){if(t.length===2)return[t[0],t[1]];if(t.length===1)return t[0]}}function i(e){return Array.isArray(e)}function a(e,t,n,r){let i=Math.round((e-t)/r)*r+t,a=r.toString().split(`.`)[1]?.length??0,o=parseFloat(i.toFixed(a));return Math.min(n,Math.max(t,o))}function o(e,t,n){return n===t?0:(e-t)/(n-t)*100}function s(e,t,n){return e/100*(n-t)+t}function c(c,l={}){let u=(0,e.reuseRootBinding)(c,n,`[@data-slot/slider] createSlider() called more than once for the same root. Returning the existing controller. Destroy it before rebinding with new options.`);if(u)return u;let d=c,f=(0,e.getPart)(c,`slider-track`),p=(0,e.getParts)(c,`slider-thumb`),m=(0,e.getPart)(c,`slider-range`),h=(0,e.getPart)(c,`slider-control`);if(!f||p.length===0)throw Error(`Slider requires slider-track and at least one slider-thumb`);let g=h??(f.parentElement instanceof HTMLElement?f.parentElement:null)??d,_=l.min??(0,e.getDataNumber)(c,`min`)??0,v=l.max??(0,e.getDataNumber)(c,`max`)??100;_>v&&([_,v]=[v,_]);let y=l.step??(0,e.getDataNumber)(c,`step`)??1;y<=0&&(y=1);let b=l.largeStep??(0,e.getDataNumber)(c,`largeStep`)??y*10,x=l.orientation??(0,e.getDataEnum)(c,`orientation`,t)??`horizontal`,S=l.disabled??(0,e.getDataBool)(c,`disabled`)??!1,C=l.onValueChange,w=l.onValueCommit,T=r((0,e.getDataString)(c,`defaultValue`)),E=l.defaultValue??T??_,D=p.length>=2;D&&!i(E)?E=[_,E]:!D&&i(E)&&(E=E[1]);let O=i(E)?[a(E[0],_,v,y),a(E[1],_,v,y)]:a(E,_,v,y),k=[],A=null,j=0,M=null,N=null,P=Array.from(new Set([d,g,f,m,...p].filter(e=>e instanceof HTMLElement)));(()=>{for(let e of P)e.setAttribute(`data-orientation`,x)})(),(t=>{for(let e of P)t?e.setAttribute(`data-disabled`,``):e.removeAttribute(`data-disabled`);for(let n of p)(0,e.setAria)(n,`disabled`,t),n.tabIndex=t?-1:0})(S);let F=(t,n)=>{t.setAttribute(`role`,`slider`),t.tabIndex=S?-1:0,(0,e.ensureId)(t,`slider-thumb`),(0,e.setAria)(t,`orientation`,x),D?t.setAttribute(`data-index`,String(n)):t.removeAttribute(`data-index`);let r=t.hasAttribute(`aria-label`)||t.hasAttribute(`aria-labelledby`),i=t.dataset.label;i?(0,e.setAria)(t,`label`,i):!r&&D&&(0,e.setAria)(t,`label`,n===0?`Minimum`:`Maximum`)};for(let e=0;e<p.length;e++)F(p[e],e);let I=x===`horizontal`,L=()=>{if(i(O)){let[t,n]=O,r=o(t,_,v),i=o(n,_,v);p[0]&&((0,e.setAria)(p[0],`valuenow`,String(t)),(0,e.setAria)(p[0],`valuemin`,String(_)),(0,e.setAria)(p[0],`valuemax`,String(n)),I?(p[0].style.left=`${r}%`,p[0].style.bottom=``):(p[0].style.bottom=`${r}%`,p[0].style.left=``)),p[1]&&((0,e.setAria)(p[1],`valuenow`,String(n)),(0,e.setAria)(p[1],`valuemin`,String(t)),(0,e.setAria)(p[1],`valuemax`,String(v)),I?(p[1].style.left=`${i}%`,p[1].style.bottom=``):(p[1].style.bottom=`${i}%`,p[1].style.left=``)),m&&(I?(m.style.left=`${r}%`,m.style.width=`${i-r}%`,m.style.bottom=``,m.style.height=``):(m.style.bottom=`${r}%`,m.style.height=`${i-r}%`,m.style.left=``,m.style.width=``))}else{let t=o(O,_,v);p[0]&&((0,e.setAria)(p[0],`valuenow`,String(O)),(0,e.setAria)(p[0],`valuemin`,String(_)),(0,e.setAria)(p[0],`valuemax`,String(v)),I?(p[0].style.left=`${t}%`,p[0].style.bottom=``):(p[0].style.bottom=`${t}%`,p[0].style.left=``)),m&&(I?(m.style.left=`0%`,m.style.width=`${t}%`,m.style.bottom=``,m.style.height=``):(m.style.bottom=`0%`,m.style.height=`${t}%`,m.style.left=``,m.style.width=``))}i(O)?c.setAttribute(`data-value`,`${O[0]},${O[1]}`):c.setAttribute(`data-value`,String(O))},R=(e,t)=>i(e)&&i(t)?e[0]===t[0]&&e[1]===t[1]:e===t,z=(t,n=!0)=>{let r;if(i(t)){let[e,n]=t;e=a(e,_,v,y),n=a(n,_,v,y),e>n&&([e,n]=[n,e]),r=[e,n]}else r=a(t,_,v,y);return R(r,O)?!1:(O=r,L(),n&&((0,e.emit)(c,`slider:change`,{value:O}),C?.(O)),!0)};L();let B=e=>{let t=f.getBoundingClientRect();if(I&&t.width===0||!I&&t.height===0)return null;let n;return n=I?(e.clientX-t.left)/t.width*100:(t.bottom-e.clientY)/t.height*100,n=Math.max(0,Math.min(100,n)),s(n,_,v)},V=e=>{if(!e||!(e instanceof HTMLElement))return null;let t=p.indexOf(e);if(t!==-1)return t;for(let t=0;t<p.length;t++)if(p[t].contains(e))return t;return null},H=e=>{if(!i(O))return 0;let[t,n]=O,r=Math.abs(e-t),a=Math.abs(e-n);return r===a?j:r<a?0:1},U=(e,t)=>{if(i(O)){let[n,r]=O;return z(e===0?[a(t,_,r,y),r]:[n,a(t,n,v,y)])}else return z(t)},W=e=>{if(S)return;e.preventDefault();let t=B(e);if(t===null)return;let n=V(e.target);n===null&&(n=H(t)),A=n,j=n,c.setAttribute(`data-dragging`,``),p[n]?.setAttribute(`data-dragging`,``),p[n]?.focus(),N=g.style.touchAction,g.style.touchAction=`none`,U(n,t),g.setPointerCapture(e.pointerId)},G=e=>{if(A===null||S)return;e.preventDefault();let t=B(e);t!==null&&U(A,t)},K=t=>{if(A!==null){c.removeAttribute(`data-dragging`);for(let e of p)e.removeAttribute(`data-dragging`);g.style.touchAction=N??``,N=null,(0,e.emit)(c,`slider:commit`,{value:O}),w?.(O),A=null;try{g.releasePointerCapture(t.pointerId)}catch{}}};k.push((0,e.on)(g,`pointerdown`,W)),k.push((0,e.on)(g,`pointermove`,G)),k.push((0,e.on)(g,`pointerup`,K)),k.push((0,e.on)(g,`pointercancel`,K));let q=e=>{if(S)return;let t=e.target,n=p.indexOf(t);if(n===-1)return;let r=0,a=null;switch(e.key){case`ArrowRight`:if(!I)return;r=y;break;case`ArrowLeft`:if(!I)return;r=-y;break;case`ArrowUp`:if(I)return;r=y;break;case`ArrowDown`:if(I)return;r=-y;break;case`PageUp`:r=b;break;case`PageDown`:r=-b;break;case`Home`:a=_;break;case`End`:a=v;break;default:return}e.shiftKey&&e.key.startsWith(`Arrow`)&&(r=r>0?b:r<0?-b:0),e.preventDefault(),j=n,M===null&&(M=i(O)?[O[0],O[1]]:O);let o=i(O)?O[n]??O[0]:O;U(n,a===null?o+r:a)},J=()=>{M!==null&&(R(M,O)||((0,e.emit)(c,`slider:commit`,{value:O}),w?.(O)),M=null)};for(let t of p)k.push((0,e.on)(t,`keydown`,q)),k.push((0,e.on)(t,`blur`,J));k.push((0,e.on)(c,`slider:set`,t=>{if(S)return;let n=t.detail,r;typeof n==`number`||Array.isArray(n)?r=n:n&&typeof n==`object`&&`value`in n&&(r=n.value),r!==void 0&&z(r)&&((0,e.emit)(c,`slider:commit`,{value:O}),w?.(O))}));let Y={setValue:e=>{z(e)},get value(){return O},get min(){return _},get max(){return v},get disabled(){return S},destroy:()=>{k.forEach(e=>e()),k.length=0,(0,e.clearRootBinding)(c,n,Y)}};return(0,e.setRootBinding)(c,n,Y),Y}function l(t=document){let r=[];for(let i of(0,e.getRoots)(t,`slider`))(0,e.hasRootBinding)(i,n)||r.push(c(i));return r}exports.create=l,exports.createSlider=c;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require(`@data-slot/core`);const t=[`horizontal`,`vertical`],n=`@data-slot/slider`;function r(e){if(!e)return;let t=e.split(`,`).map(e=>parseFloat(e.trim()));if(!t.some(e=>isNaN(e))){if(t.length===2)return[t[0],t[1]];if(t.length===1)return t[0]}}function i(e){return Array.isArray(e)}function a(e,t,n,r){let i=Math.round((e-t)/r)*r+t,a=r.toString().split(`.`)[1]?.length??0,o=parseFloat(i.toFixed(a));return Math.min(n,Math.max(t,o))}function o(e,t,n){return n===t?0:(e-t)/(n-t)*100}function s(e,t,n){return e/100*(n-t)+t}function c(c,l={}){let u=(0,e.reuseRootBinding)(c,n,`[@data-slot/slider] createSlider() called more than once for the same root. Returning the existing controller. Destroy it before rebinding with new options.`);if(u)return u;let d=c,f=(0,e.getPart)(c,`slider-track`),p=(0,e.getParts)(c,`slider-thumb`),m=(0,e.getPart)(c,`slider-range`),h=(0,e.getPart)(c,`slider-control`);if(!f||p.length===0)throw Error(`Slider requires slider-track and at least one slider-thumb`);let g=h??(f.parentElement instanceof HTMLElement?f.parentElement:null)??d,_=l.min??(0,e.getDataNumber)(c,`min`)??0,v=l.max??(0,e.getDataNumber)(c,`max`)??100;_>v&&([_,v]=[v,_]);let y=l.step??(0,e.getDataNumber)(c,`step`)??1;y<=0&&(y=1);let b=l.largeStep??(0,e.getDataNumber)(c,`largeStep`)??y*10,x=l.orientation??(0,e.getDataEnum)(c,`orientation`,t)??`horizontal`,S=l.disabled??(0,e.getDataBool)(c,`disabled`)??!1,C=l.onValueChange,w=l.onValueCommit,T=r((0,e.getDataString)(c,`defaultValue`)),E=l.defaultValue??T??_,D=p.length>=2;D&&!i(E)?E=[_,E]:!D&&i(E)&&(E=E[1]);let O=i(E)?[a(E[0],_,v,y),a(E[1],_,v,y)]:a(E,_,v,y),k=[],A=null,j=0,M=null,N=null,P=Array.from(new Set([d,g,f,m,...p].filter(e=>e instanceof HTMLElement)));(()=>{for(let e of P)e.setAttribute(`data-orientation`,x)})(),(t=>{for(let e of P)t?e.setAttribute(`data-disabled`,``):e.removeAttribute(`data-disabled`);for(let n of p)(0,e.setAria)(n,`disabled`,t),n.tabIndex=t?-1:0})(S);let F=(t,n)=>{t.setAttribute(`role`,`slider`),t.tabIndex=S?-1:0,(0,e.ensureId)(t,`slider-thumb`),(0,e.setAria)(t,`orientation`,x),D?t.setAttribute(`data-index`,String(n)):t.removeAttribute(`data-index`);let r=t.hasAttribute(`aria-label`)||t.hasAttribute(`aria-labelledby`),i=t.dataset.label;i?(0,e.setAria)(t,`label`,i):!r&&D&&(0,e.setAria)(t,`label`,n===0?`Minimum`:`Maximum`)};for(let e=0;e<p.length;e++)F(p[e],e);let I=x===`horizontal`,L=()=>{f.style.position=`relative`},R=(e,t)=>{e.style.position=`absolute`,e.style.setProperty(`--position`,`${t}%`),I?(e.style.setProperty(`inset-inline-start`,`var(--position)`),e.style.top=`50%`,e.style.bottom=``,e.style.left=``,e.style.setProperty(`translate`,`-50% -50%`)):(e.style.removeProperty(`inset-inline-start`),e.style.bottom=`var(--position)`,e.style.left=`50%`,e.style.top=``,e.style.setProperty(`translate`,`-50% 50%`))},z=(e,t,n)=>{if(!m)return;let r=n?e:t;m.style.setProperty(`--start-position`,`${r}%`),m.style.position=I?`relative`:`absolute`,I?(m.style.setProperty(`inset-inline-start`,n?`var(--start-position)`:`0%`),m.style.width=n?`var(--relative-size)`:`var(--start-position)`,m.style.height=`inherit`,m.style.bottom=``,m.style.left=``):(m.style.removeProperty(`inset-inline-start`),m.style.bottom=n?`var(--start-position)`:`0%`,m.style.height=n?`var(--relative-size)`:`var(--start-position)`,m.style.width=`inherit`,m.style.left=``),n?m.style.setProperty(`--relative-size`,`${t}%`):m.style.removeProperty(`--relative-size`)};L();let B=()=>{if(i(O)){let[t,n]=O,r=o(t,_,v),i=o(n,_,v);p[0]&&((0,e.setAria)(p[0],`valuenow`,String(t)),(0,e.setAria)(p[0],`valuemin`,String(_)),(0,e.setAria)(p[0],`valuemax`,String(n)),R(p[0],r)),p[1]&&((0,e.setAria)(p[1],`valuenow`,String(n)),(0,e.setAria)(p[1],`valuemin`,String(t)),(0,e.setAria)(p[1],`valuemax`,String(v)),R(p[1],i)),z(r,i-r,!0)}else{let t=o(O,_,v);p[0]&&((0,e.setAria)(p[0],`valuenow`,String(O)),(0,e.setAria)(p[0],`valuemin`,String(_)),(0,e.setAria)(p[0],`valuemax`,String(v)),R(p[0],t)),z(0,t,!1)}i(O)?c.setAttribute(`data-value`,`${O[0]},${O[1]}`):c.setAttribute(`data-value`,String(O))},V=(e,t)=>i(e)&&i(t)?e[0]===t[0]&&e[1]===t[1]:e===t,H=(t,n=!0)=>{let r;if(i(t)){let[e,n]=t;e=a(e,_,v,y),n=a(n,_,v,y),e>n&&([e,n]=[n,e]),r=[e,n]}else r=a(t,_,v,y);return V(r,O)?!1:(O=r,B(),n&&((0,e.emit)(c,`slider:change`,{value:O}),C?.(O)),!0)};B();let U=e=>{let t=f.getBoundingClientRect();if(I&&t.width===0||!I&&t.height===0)return null;let n;return n=I?(e.clientX-t.left)/t.width*100:(t.bottom-e.clientY)/t.height*100,n=Math.max(0,Math.min(100,n)),s(n,_,v)},W=e=>{if(!e||!(e instanceof HTMLElement))return null;let t=p.indexOf(e);if(t!==-1)return t;for(let t=0;t<p.length;t++)if(p[t].contains(e))return t;return null},G=e=>{if(!i(O))return 0;let[t,n]=O,r=Math.abs(e-t),a=Math.abs(e-n);return r===a?j:r<a?0:1},K=(e,t)=>{if(i(O)){let[n,r]=O;return H(e===0?[a(t,_,r,y),r]:[n,a(t,n,v,y)])}else return H(t)},q=e=>{if(S)return;e.preventDefault();let t=U(e);if(t===null)return;let n=W(e.target);n===null&&(n=G(t)),A=n,j=n,c.setAttribute(`data-dragging`,``),p[n]?.setAttribute(`data-dragging`,``),p[n]?.focus(),N=g.style.touchAction,g.style.touchAction=`none`,K(n,t),g.setPointerCapture(e.pointerId)},J=e=>{if(A===null||S)return;e.preventDefault();let t=U(e);t!==null&&K(A,t)},Y=t=>{if(A!==null){c.removeAttribute(`data-dragging`);for(let e of p)e.removeAttribute(`data-dragging`);g.style.touchAction=N??``,N=null,(0,e.emit)(c,`slider:commit`,{value:O}),w?.(O),A=null;try{g.releasePointerCapture(t.pointerId)}catch{}}};k.push((0,e.on)(g,`pointerdown`,q)),k.push((0,e.on)(g,`pointermove`,J)),k.push((0,e.on)(g,`pointerup`,Y)),k.push((0,e.on)(g,`pointercancel`,Y));let X=e=>{if(S)return;let t=e.target,n=p.indexOf(t);if(n===-1)return;let r=0,a=null;switch(e.key){case`ArrowRight`:if(!I)return;r=y;break;case`ArrowLeft`:if(!I)return;r=-y;break;case`ArrowUp`:if(I)return;r=y;break;case`ArrowDown`:if(I)return;r=-y;break;case`PageUp`:r=b;break;case`PageDown`:r=-b;break;case`Home`:a=_;break;case`End`:a=v;break;default:return}e.shiftKey&&e.key.startsWith(`Arrow`)&&(r=r>0?b:r<0?-b:0),e.preventDefault(),j=n,M===null&&(M=i(O)?[O[0],O[1]]:O);let o=i(O)?O[n]??O[0]:O;K(n,a===null?o+r:a)},Z=()=>{M!==null&&(V(M,O)||((0,e.emit)(c,`slider:commit`,{value:O}),w?.(O)),M=null)};for(let t of p)k.push((0,e.on)(t,`keydown`,X)),k.push((0,e.on)(t,`blur`,Z));k.push((0,e.on)(c,`slider:set`,t=>{if(S)return;let n=t.detail,r;typeof n==`number`||Array.isArray(n)?r=n:n&&typeof n==`object`&&`value`in n&&(r=n.value),r!==void 0&&H(r)&&((0,e.emit)(c,`slider:commit`,{value:O}),w?.(O))}));let Q={setValue:e=>{H(e)},get value(){return O},get min(){return _},get max(){return v},get disabled(){return S},destroy:()=>{k.forEach(e=>e()),k.length=0,(0,e.clearRootBinding)(c,n,Q)}};return(0,e.setRootBinding)(c,n,Q),Q}function l(t=document){let r=[];for(let i of(0,e.getRoots)(t,`slider`))(0,e.hasRootBinding)(i,n)||r.push(c(i));return r}exports.create=l,exports.createSlider=c;

package/dist/index.js

@@ -1 +1 @@
-import{clearRootBinding as e,emit as t,ensureId as n,getDataBool as r,getDataEnum as i,getDataNumber as a,getDataString as o,getPart as s,getParts as c,getRoots as l,hasRootBinding as u,on as d,reuseRootBinding as ee,setAria as f,setRootBinding as p}from"@data-slot/core";const m=[`horizontal`,`vertical`],h=`@data-slot/slider`;function g(e){if(!e)return;let t=e.split(`,`).map(e=>parseFloat(e.trim()));if(!t.some(e=>isNaN(e))){if(t.length===2)return[t[0],t[1]];if(t.length===1)return t[0]}}function _(e){return Array.isArray(e)}function v(e,t,n,r){let i=Math.round((e-t)/r)*r+t,a=r.toString().split(`.`)[1]?.length??0,o=parseFloat(i.toFixed(a));return Math.min(n,Math.max(t,o))}function y(e,t,n){return n===t?0:(e-t)/(n-t)*100}function b(e,t,n){return e/100*(n-t)+t}function x(l,u={}){let x=ee(l,h,`[@data-slot/slider] createSlider() called more than once for the same root. Returning the existing controller. Destroy it before rebinding with new options.`);if(x)return x;let S=l,C=s(l,`slider-track`),w=c(l,`slider-thumb`),T=s(l,`slider-range`),te=s(l,`slider-control`);if(!C||w.length===0)throw Error(`Slider requires slider-track and at least one slider-thumb`);let E=te??(C.parentElement instanceof HTMLElement?C.parentElement:null)??S,D=u.min??a(l,`min`)??0,O=u.max??a(l,`max`)??100;D>O&&([D,O]=[O,D]);let k=u.step??a(l,`step`)??1;k<=0&&(k=1);let A=u.largeStep??a(l,`largeStep`)??k*10,j=u.orientation??i(l,`orientation`,m)??`horizontal`,M=u.disabled??r(l,`disabled`)??!1,N=u.onValueChange,P=u.onValueCommit,ne=g(o(l,`defaultValue`)),F=u.defaultValue??ne??D,I=w.length>=2;I&&!_(F)?F=[D,F]:!I&&_(F)&&(F=F[1]);let L=_(F)?[v(F[0],D,O,k),v(F[1],D,O,k)]:v(F,D,O,k),R=[],z=null,B=0,V=null,H=null,U=Array.from(new Set([S,E,C,T,...w].filter(e=>e instanceof HTMLElement)));(()=>{for(let e of U)e.setAttribute(`data-orientation`,j)})(),(e=>{for(let t of U)e?t.setAttribute(`data-disabled`,``):t.removeAttribute(`data-disabled`);for(let t of w)f(t,`disabled`,e),t.tabIndex=e?-1:0})(M);let W=(e,t)=>{e.setAttribute(`role`,`slider`),e.tabIndex=M?-1:0,n(e,`slider-thumb`),f(e,`orientation`,j),I?e.setAttribute(`data-index`,String(t)):e.removeAttribute(`data-index`);let r=e.hasAttribute(`aria-label`)||e.hasAttribute(`aria-labelledby`),i=e.dataset.label;i?f(e,`label`,i):!r&&I&&f(e,`label`,t===0?`Minimum`:`Maximum`)};for(let e=0;e<w.length;e++)W(w[e],e);let G=j===`horizontal`,K=()=>{if(_(L)){let[e,t]=L,n=y(e,D,O),r=y(t,D,O);w[0]&&(f(w[0],`valuenow`,String(e)),f(w[0],`valuemin`,String(D)),f(w[0],`valuemax`,String(t)),G?(w[0].style.left=`${n}%`,w[0].style.bottom=``):(w[0].style.bottom=`${n}%`,w[0].style.left=``)),w[1]&&(f(w[1],`valuenow`,String(t)),f(w[1],`valuemin`,String(e)),f(w[1],`valuemax`,String(O)),G?(w[1].style.left=`${r}%`,w[1].style.bottom=``):(w[1].style.bottom=`${r}%`,w[1].style.left=``)),T&&(G?(T.style.left=`${n}%`,T.style.width=`${r-n}%`,T.style.bottom=``,T.style.height=``):(T.style.bottom=`${n}%`,T.style.height=`${r-n}%`,T.style.left=``,T.style.width=``))}else{let e=y(L,D,O);w[0]&&(f(w[0],`valuenow`,String(L)),f(w[0],`valuemin`,String(D)),f(w[0],`valuemax`,String(O)),G?(w[0].style.left=`${e}%`,w[0].style.bottom=``):(w[0].style.bottom=`${e}%`,w[0].style.left=``)),T&&(G?(T.style.left=`0%`,T.style.width=`${e}%`,T.style.bottom=``,T.style.height=``):(T.style.bottom=`0%`,T.style.height=`${e}%`,T.style.left=``,T.style.width=``))}_(L)?l.setAttribute(`data-value`,`${L[0]},${L[1]}`):l.setAttribute(`data-value`,String(L))},q=(e,t)=>_(e)&&_(t)?e[0]===t[0]&&e[1]===t[1]:e===t,J=(e,n=!0)=>{let r;if(_(e)){let[t,n]=e;t=v(t,D,O,k),n=v(n,D,O,k),t>n&&([t,n]=[n,t]),r=[t,n]}else r=v(e,D,O,k);return q(r,L)?!1:(L=r,K(),n&&(t(l,`slider:change`,{value:L}),N?.(L)),!0)};K();let Y=e=>{let t=C.getBoundingClientRect();if(G&&t.width===0||!G&&t.height===0)return null;let n;return n=G?(e.clientX-t.left)/t.width*100:(t.bottom-e.clientY)/t.height*100,n=Math.max(0,Math.min(100,n)),b(n,D,O)},X=e=>{if(!e||!(e instanceof HTMLElement))return null;let t=w.indexOf(e);if(t!==-1)return t;for(let t=0;t<w.length;t++)if(w[t].contains(e))return t;return null},re=e=>{if(!_(L))return 0;let[t,n]=L,r=Math.abs(e-t),i=Math.abs(e-n);return r===i?B:r<i?0:1},Z=(e,t)=>{if(_(L)){let[n,r]=L;return J(e===0?[v(t,D,r,k),r]:[n,v(t,n,O,k)])}else return J(t)},ie=e=>{if(M)return;e.preventDefault();let t=Y(e);if(t===null)return;let n=X(e.target);n===null&&(n=re(t)),z=n,B=n,l.setAttribute(`data-dragging`,``),w[n]?.setAttribute(`data-dragging`,``),w[n]?.focus(),H=E.style.touchAction,E.style.touchAction=`none`,Z(n,t),E.setPointerCapture(e.pointerId)},ae=e=>{if(z===null||M)return;e.preventDefault();let t=Y(e);t!==null&&Z(z,t)},Q=e=>{if(z!==null){l.removeAttribute(`data-dragging`);for(let e of w)e.removeAttribute(`data-dragging`);E.style.touchAction=H??``,H=null,t(l,`slider:commit`,{value:L}),P?.(L),z=null;try{E.releasePointerCapture(e.pointerId)}catch{}}};R.push(d(E,`pointerdown`,ie)),R.push(d(E,`pointermove`,ae)),R.push(d(E,`pointerup`,Q)),R.push(d(E,`pointercancel`,Q));let oe=e=>{if(M)return;let t=e.target,n=w.indexOf(t);if(n===-1)return;let r=0,i=null;switch(e.key){case`ArrowRight`:if(!G)return;r=k;break;case`ArrowLeft`:if(!G)return;r=-k;break;case`ArrowUp`:if(G)return;r=k;break;case`ArrowDown`:if(G)return;r=-k;break;case`PageUp`:r=A;break;case`PageDown`:r=-A;break;case`Home`:i=D;break;case`End`:i=O;break;default:return}e.shiftKey&&e.key.startsWith(`Arrow`)&&(r=r>0?A:r<0?-A:0),e.preventDefault(),B=n,V===null&&(V=_(L)?[L[0],L[1]]:L);let a=_(L)?L[n]??L[0]:L;Z(n,i===null?a+r:i)},se=()=>{V!==null&&(q(V,L)||(t(l,`slider:commit`,{value:L}),P?.(L)),V=null)};for(let e of w)R.push(d(e,`keydown`,oe)),R.push(d(e,`blur`,se));R.push(d(l,`slider:set`,e=>{if(M)return;let n=e.detail,r;typeof n==`number`||Array.isArray(n)?r=n:n&&typeof n==`object`&&`value`in n&&(r=n.value),r!==void 0&&J(r)&&(t(l,`slider:commit`,{value:L}),P?.(L))}));let $={setValue:e=>{J(e)},get value(){return L},get min(){return D},get max(){return O},get disabled(){return M},destroy:()=>{R.forEach(e=>e()),R.length=0,e(l,h,$)}};return p(l,h,$),$}function S(e=document){let t=[];for(let n of l(e,`slider`))u(n,h)||t.push(x(n));return t}export{S as create,x as createSlider};
+import{clearRootBinding as e,emit as t,ensureId as n,getDataBool as r,getDataEnum as i,getDataNumber as a,getDataString as o,getPart as s,getParts as ee,getRoots as c,hasRootBinding as l,on as u,reuseRootBinding as te,setAria as d,setRootBinding as f}from"@data-slot/core";const p=[`horizontal`,`vertical`],m=`@data-slot/slider`;function ne(e){if(!e)return;let t=e.split(`,`).map(e=>parseFloat(e.trim()));if(!t.some(e=>isNaN(e))){if(t.length===2)return[t[0],t[1]];if(t.length===1)return t[0]}}function h(e){return Array.isArray(e)}function g(e,t,n,r){let i=Math.round((e-t)/r)*r+t,a=r.toString().split(`.`)[1]?.length??0,o=parseFloat(i.toFixed(a));return Math.min(n,Math.max(t,o))}function _(e,t,n){return n===t?0:(e-t)/(n-t)*100}function v(e,t,n){return e/100*(n-t)+t}function y(c,l={}){let y=te(c,m,`[@data-slot/slider] createSlider() called more than once for the same root. Returning the existing controller. Destroy it before rebinding with new options.`);if(y)return y;let b=c,x=s(c,`slider-track`),S=ee(c,`slider-thumb`),C=s(c,`slider-range`),re=s(c,`slider-control`);if(!x||S.length===0)throw Error(`Slider requires slider-track and at least one slider-thumb`);let w=re??(x.parentElement instanceof HTMLElement?x.parentElement:null)??b,T=l.min??a(c,`min`)??0,E=l.max??a(c,`max`)??100;T>E&&([T,E]=[E,T]);let D=l.step??a(c,`step`)??1;D<=0&&(D=1);let O=l.largeStep??a(c,`largeStep`)??D*10,k=l.orientation??i(c,`orientation`,p)??`horizontal`,A=l.disabled??r(c,`disabled`)??!1,ie=l.onValueChange,j=l.onValueCommit,M=ne(o(c,`defaultValue`)),N=l.defaultValue??M??T,P=S.length>=2;P&&!h(N)?N=[T,N]:!P&&h(N)&&(N=N[1]);let F=h(N)?[g(N[0],T,E,D),g(N[1],T,E,D)]:g(N,T,E,D),I=[],L=null,R=0,z=null,B=null,V=Array.from(new Set([b,w,x,C,...S].filter(e=>e instanceof HTMLElement)));(()=>{for(let e of V)e.setAttribute(`data-orientation`,k)})(),(e=>{for(let t of V)e?t.setAttribute(`data-disabled`,``):t.removeAttribute(`data-disabled`);for(let t of S)d(t,`disabled`,e),t.tabIndex=e?-1:0})(A);let H=(e,t)=>{e.setAttribute(`role`,`slider`),e.tabIndex=A?-1:0,n(e,`slider-thumb`),d(e,`orientation`,k),P?e.setAttribute(`data-index`,String(t)):e.removeAttribute(`data-index`);let r=e.hasAttribute(`aria-label`)||e.hasAttribute(`aria-labelledby`),i=e.dataset.label;i?d(e,`label`,i):!r&&P&&d(e,`label`,t===0?`Minimum`:`Maximum`)};for(let e=0;e<S.length;e++)H(S[e],e);let U=k===`horizontal`,W=()=>{x.style.position=`relative`},G=(e,t)=>{e.style.position=`absolute`,e.style.setProperty(`--position`,`${t}%`),U?(e.style.setProperty(`inset-inline-start`,`var(--position)`),e.style.top=`50%`,e.style.bottom=``,e.style.left=``,e.style.setProperty(`translate`,`-50% -50%`)):(e.style.removeProperty(`inset-inline-start`),e.style.bottom=`var(--position)`,e.style.left=`50%`,e.style.top=``,e.style.setProperty(`translate`,`-50% 50%`))},K=(e,t,n)=>{if(!C)return;let r=n?e:t;C.style.setProperty(`--start-position`,`${r}%`),C.style.position=U?`relative`:`absolute`,U?(C.style.setProperty(`inset-inline-start`,n?`var(--start-position)`:`0%`),C.style.width=n?`var(--relative-size)`:`var(--start-position)`,C.style.height=`inherit`,C.style.bottom=``,C.style.left=``):(C.style.removeProperty(`inset-inline-start`),C.style.bottom=n?`var(--start-position)`:`0%`,C.style.height=n?`var(--relative-size)`:`var(--start-position)`,C.style.width=`inherit`,C.style.left=``),n?C.style.setProperty(`--relative-size`,`${t}%`):C.style.removeProperty(`--relative-size`)};W();let q=()=>{if(h(F)){let[e,t]=F,n=_(e,T,E),r=_(t,T,E);S[0]&&(d(S[0],`valuenow`,String(e)),d(S[0],`valuemin`,String(T)),d(S[0],`valuemax`,String(t)),G(S[0],n)),S[1]&&(d(S[1],`valuenow`,String(t)),d(S[1],`valuemin`,String(e)),d(S[1],`valuemax`,String(E)),G(S[1],r)),K(n,r-n,!0)}else{let e=_(F,T,E);S[0]&&(d(S[0],`valuenow`,String(F)),d(S[0],`valuemin`,String(T)),d(S[0],`valuemax`,String(E)),G(S[0],e)),K(0,e,!1)}h(F)?c.setAttribute(`data-value`,`${F[0]},${F[1]}`):c.setAttribute(`data-value`,String(F))},J=(e,t)=>h(e)&&h(t)?e[0]===t[0]&&e[1]===t[1]:e===t,Y=(e,n=!0)=>{let r;if(h(e)){let[t,n]=e;t=g(t,T,E,D),n=g(n,T,E,D),t>n&&([t,n]=[n,t]),r=[t,n]}else r=g(e,T,E,D);return J(r,F)?!1:(F=r,q(),n&&(t(c,`slider:change`,{value:F}),ie?.(F)),!0)};q();let X=e=>{let t=x.getBoundingClientRect();if(U&&t.width===0||!U&&t.height===0)return null;let n;return n=U?(e.clientX-t.left)/t.width*100:(t.bottom-e.clientY)/t.height*100,n=Math.max(0,Math.min(100,n)),v(n,T,E)},ae=e=>{if(!e||!(e instanceof HTMLElement))return null;let t=S.indexOf(e);if(t!==-1)return t;for(let t=0;t<S.length;t++)if(S[t].contains(e))return t;return null},oe=e=>{if(!h(F))return 0;let[t,n]=F,r=Math.abs(e-t),i=Math.abs(e-n);return r===i?R:r<i?0:1},Z=(e,t)=>{if(h(F)){let[n,r]=F;return Y(e===0?[g(t,T,r,D),r]:[n,g(t,n,E,D)])}else return Y(t)},se=e=>{if(A)return;e.preventDefault();let t=X(e);if(t===null)return;let n=ae(e.target);n===null&&(n=oe(t)),L=n,R=n,c.setAttribute(`data-dragging`,``),S[n]?.setAttribute(`data-dragging`,``),S[n]?.focus(),B=w.style.touchAction,w.style.touchAction=`none`,Z(n,t),w.setPointerCapture(e.pointerId)},ce=e=>{if(L===null||A)return;e.preventDefault();let t=X(e);t!==null&&Z(L,t)},Q=e=>{if(L!==null){c.removeAttribute(`data-dragging`);for(let e of S)e.removeAttribute(`data-dragging`);w.style.touchAction=B??``,B=null,t(c,`slider:commit`,{value:F}),j?.(F),L=null;try{w.releasePointerCapture(e.pointerId)}catch{}}};I.push(u(w,`pointerdown`,se)),I.push(u(w,`pointermove`,ce)),I.push(u(w,`pointerup`,Q)),I.push(u(w,`pointercancel`,Q));let le=e=>{if(A)return;let t=e.target,n=S.indexOf(t);if(n===-1)return;let r=0,i=null;switch(e.key){case`ArrowRight`:if(!U)return;r=D;break;case`ArrowLeft`:if(!U)return;r=-D;break;case`ArrowUp`:if(U)return;r=D;break;case`ArrowDown`:if(U)return;r=-D;break;case`PageUp`:r=O;break;case`PageDown`:r=-O;break;case`Home`:i=T;break;case`End`:i=E;break;default:return}e.shiftKey&&e.key.startsWith(`Arrow`)&&(r=r>0?O:r<0?-O:0),e.preventDefault(),R=n,z===null&&(z=h(F)?[F[0],F[1]]:F);let a=h(F)?F[n]??F[0]:F;Z(n,i===null?a+r:i)},ue=()=>{z!==null&&(J(z,F)||(t(c,`slider:commit`,{value:F}),j?.(F)),z=null)};for(let e of S)I.push(u(e,`keydown`,le)),I.push(u(e,`blur`,ue));I.push(u(c,`slider:set`,e=>{if(A)return;let n=e.detail,r;typeof n==`number`||Array.isArray(n)?r=n:n&&typeof n==`object`&&`value`in n&&(r=n.value),r!==void 0&&Y(r)&&(t(c,`slider:commit`,{value:F}),j?.(F))}));let $={setValue:e=>{Y(e)},get value(){return F},get min(){return T},get max(){return E},get disabled(){return A},destroy:()=>{I.forEach(e=>e()),I.length=0,e(c,m,$)}};return f(c,m,$),$}function b(e=document){let t=[];for(let n of c(e,`slider`))l(n,m)||t.push(y(n));return t}export{b as create,y as createSlider};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@data-slot/slider",
-  "version": "0.2.149",
+  "version": "0.2.151",
   "type": "module",
   "sideEffects": false,
   "main": "./dist/index.cjs",
@@ -35,6 +35,6 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "@data-slot/core": "0.2.149"
+    "@data-slot/core": "0.2.151"
   }
 }