https://onesiteapp.com/assets/range-slider-jdAoDiVU.js

1import{d as h,a4 as g,K as Z,O as ee,bl as le,cN as se,aK as Q,P as te,cP as Y,B as o,aB as ae,bf as oe,aM as re,Q as ne,cQ as ue,dW as ie,_ as R,x as $,y as k,z as m,C as de,b4 as x,ar as c,aw as f,b3 as ce}from"./same-chunk-name-CYm4I15d.js";import{u as me,a as pe,V as _e,b as E,m as fe,g as q}from"./VSliderTrack-CDHIQSJC.js";import{_ as ve}from"./AppCardCode-BgqLdguG.js";import"./index-Bv0_4MMX.js";const be=h({__name:"DemoRangeSliderVertical",setup(s,{expose:e}){e();const l={sliderValues:g([20,40])};return Object.defineProperty(l,"__isScriptSetup",{enumerable:!1,value:!0}),l}}),Ve=ne({...ie(),...ue(),...fe(),strict:Boolean,modelValue:{type:Array,default:()=>[0,0]}},"VRangeSlider"),y=Z()({name:"VRangeSlider",props:Ve(),emits:{"update:focused":s=>!0,"update:modelValue":s=>!0,end:s=>!0,start:s=>!0},setup(s,e){let{slots:t,emit:l}=e;const r=g(),n=g(),u=g(),{rtlClasses:S}=ee();function F(p){if(!r.value||!n.value)return;const _=q(p,r.value.$el,s.direction),d=q(p,n.value.$el,s.direction),i=Math.abs(_),b=Math.abs(d);return i<b||i===b&&_<0?r.value.$el:n.value.$el}const O=me(s),a=le(s,"modelValue",void 0,p=>p!=null&&p.length?p.map(_=>O.roundValue(_)):[0,0]),{activeThumbRef:v,hasLabels:M,max:z,min:U,mousePressed:G,onSliderMousedown:H,onSliderTouchstart:J,position:I,trackContainerRef:X,readonly:L}=pe({props:s,steps:O,onSliderStart:()=>{l("start",a.value)},onSliderEnd:p=>{var i;let{value:_}=p;const d=v.value===((i=r.value)==null?void 0:i.$el)?[_,a.value[1]]:[a.value[0],_];!s.strict&&d[0]<d[1]&&(a.value=d),l("end",a.value)},onSliderMove:p=>{var b,w,D,V;let{value:_}=p;const[d,i]=a.value;!s.strict&&d===i&&d!==U.value&&(v.value=_>d?(b=n.value)==null?void 0:b.$el:(w=r.value)==null?void 0:w.$el,(D=v.value)==null||D.focus()),v.value===((V=r.value)==null?void 0:V.$el)?a.value=[Math.min(_,i),i]:a.value=[d,Math.max(d,_)]},getActiveThumb:F}),{isFocused:B,focus:N,blur:W}=se(s),A=Q(()=>I(a.value[0])),K=Q(()=>I(a.value[1]));return te(()=>{const p=Y.filterProps(s),_=!!(s.label||t.label||t.prepend);return o(Y,re({class:["v-slider","v-range-slider",{"v-slider--has-labels":!!t["tick-label"]||M.value,"v-slider--focused":B.value,"v-slider--pressed":G.value,"v-slider--disabled":s.disabled},S.value,s.class],style:s.style,ref:u},p,{focused:B.value}),{...t,prepend:_?d=>{var i,b;return o(ae,null,[((i=t.label)==null?void 0:i.call(t,d))??(s.label?o(oe,{class:"v-slider__label",text:s.label},null):void 0),(b=t.prepend)==null?void 0:b.call(t,d)])}:void 0,default:d=>{var w,D;let{id:i,messagesId:b}=d;return o("div",{class:"v-slider__container",onMousedown:L.value?void 0:H,onTouchstartPassive:L.value?void 0:J},[o("input",{id:`${i.value}_start`,name:s.name||i.value,disabled:!!s.disabled,readonly:!!s.readonly,tabindex:"-1",value:a.value[0]},null),o("input",{id:`${i.value}_stop`,name:s.name||i.value,disabled:!!s.disabled,readonly:!!s.readonly,tabindex:"-1",value:a.value[1]},null),o(_e,{ref:X,start:A.value,stop:K.value},{"tick-label":t["tick-label"]}),o(E,{ref:r,"aria-describedby":b.value,focused:B&&v.value===((w=r.value)==null?void 0:w.$el),modelValue:a.value[0],"onUpdate:modelValue":V=>a.value=[V,a.value[1]],onFocus:V=>{var C,P,T,j;N(),v.value=(C=r.value)==null?void 0:C.$el,a.value[0]===a.value[1]&&a.value[1]===U.value&&V.relatedTarget!==((P=n.value)==null?void 0:P.$el)&&((T=r.value)==null||T.$el.blur(),(j=n.value)==null||j.$el.focus())},onBlur:()=>{W(),v.value=void 0},min:U.value,max:a.value[1],position:A.value,ripple:s.ripple},{"thumb-label":t["thumb-label"]}),o(E,{ref:n,"aria-describedby":b.value,focused:B&&v.value===((D=n.value)==null?void 0:D.$el),modelValue:a.value[1],"onUpdate:modelValue":V=>a.value=[a.value[0],V],onFocus:V=>{var C,P,T,j;N(),v.value=(C=n.value)==null?void 0:C.$el,a.value[0]===a.value[1]&&a.value[0]===z.value&&V.relatedTarget!==((P=r.value)==null?void 0:P.$el)&&((T=n.value)==null||T.$el.blur(),(j=r.value)==null||j.$el.focus())},onBlur:()=>{W(),v.value=void 0},min:a.value[0],max:z.value,position:K.value,ripple:s.ripple},{"thumb-label":t["thumb-label"]})])}})}),{}}});function ge(s,e,t,l,r,n){return $(),k(y,{modelValue:l.sliderValues,"onUpdate:modelValue":e[0]||(e[0]=u=>l.sliderValues=u),direction:"vertical"},null,8,["modelValue"])}const Se=R(be,[["render",ge],["__file","/opt/buildhome/repo/src/views/demos/forms/form-elements/range-slider/DemoRangeSliderVertical.vue"]]),he=h({__name:"DemoRangeSliderThumbLabel",setup(s,{expose:e}){e();const t=["Winter","Spring","Summer","Fall"],l=["tabler-snowflake","tabler-leaf","tabler-flame","tabler-droplet"],r=g([1,2]),n={seasons:t,icons:l,sliderValues:r};return Object.defineProperty(n,"__isScriptSetup",{enumerable:!1,value:!0}),n}});function Re(s,e,t,l,r,n){return $(),k(y,{modelValue:l.sliderValues,"onUpdate:modelValue":e[0]||(e[0]=u=>l.sliderValues=u),tick:l.seasons,min:"0",max:"3",step:1,"show-ticks":"always","thumb-label":"","tick-size":"4"},{"thumb-label":m(({modelValue:u})=>[o(de,{icon:l.icons[u]},null,8,["icon"])]),_:1},8,["modelValue"])}const $e=R(he,[["render",Re],["__file","/opt/buildhome/repo/src/views/demos/forms/form-elements/range-slider/DemoRangeSliderThumbLabel.vue"]]),ke=h({__name:"DemoRangeSliderStep",setup(s,{expose:e}){e();const l={sliderValues:g([20,40])};return Object.defineProperty(l,"__isScriptSetup",{enumerable:!1,value:!0}),l}});function xe(s,e,t,l,r,n){return $(),k(y,{modelValue:l.sliderValues,"onUpdate:modelValue":e[0]||(e[0]=u=>l.sliderValues=u),step:"10"},null,8,["modelValue"])}const ye=R(ke,[["render",xe],["__file","/opt/buildhome/repo/src/views/demos/forms/form-elements/range-slider/DemoRangeSliderStep.vue"]]),we=h({__name:"DemoRangeSliderColor",setup(s,{expose:e}){e();const l={sliderValues:g([10,60])};return Object.defineProperty(l,"__isScriptSetup",{enumerable:!1,value:!0}),l}});function De(s,e,t,l,r,n){return $(),k(y,{modelValue:l.sliderValues,"onUpdate:modelValue":e[0]||(e[0]=u=>l.sliderValues=u),color:"success","track-color":"warning"},null,8,["modelValue"])}const Ce=R(we,[["render",De],["__file","/opt/buildhome/repo/src/views/demos/forms/form-elements/range-slider/DemoRangeSliderColor.vue"]]),Pe=h({__name:"DemoRangeSliderDisabled",setup(s,{expose:e}){e();const l={slidersValues:g([30,60])};return Object.defineProperty(l,"__isScriptSetup",{enumerable:!1,value:!0}),l}});function Te(s,e,t,l,r,n){return $(),k(y,{modelValue:l.slidersValues,"onUpdate:modelValue":e[0]||(e[0]=u=>l.slidersValues=u),disabled:"",label:"Disabled"},null,8,["modelValue"])}const je=R(Pe,[["render",Te],["__file","/opt/buildhome/repo/src/views/demos/forms/form-elements/range-slider/DemoRangeSliderDisabled.vue"]]),Oe=h({__name:"DemoRangeSliderBasic",setup(s,{expose:e}){e();const l={sliderValues:g([10,60])};return Object.defineProperty(l,"__isScriptSetup",{enumerable:!1,value:!0}),l}});function Be(s,e,t,l,r,n){return $(),k(y,{modelValue:l.sliderValues,"onUpdate:modelValue":e[0]||(e[0]=u=>l.sliderValues=u)},null,8,["modelValue"])}const Fe=R(Oe,[["render",Be],["__file","/opt/buildhome/repo/src/views/demos/forms/form-elements/range-slider/DemoRangeSliderBasic.vue"]]),Me={ts:`<script setup lang="ts">
2const sliderValues = ref([10, 60])
3<\/script>
4
5<template>
6  <VRangeSlider v-model="sliderValues" />
7</template>
8`,js:`<script setup>
9const sliderValues = ref([
10  10,
11  60,
12])
13<\/script>
14
15<template>
16  <VRangeSlider v-model="sliderValues" />
17</template>
18`},Ue={ts:`<script lang="ts" setup>
19const sliderValues = ref([10, 60])
20<\/script>
21
22<template>
23  <VRangeSlider
24    v-model="sliderValues"
25    color="success"
26    track-color="warning"
27  />
28</template>
29`,js:`<script setup>
30const sliderValues = ref([
31  10,
32  60,
33])
34<\/script>
35
36<template>
37  <VRangeSlider
38    v-model="sliderValues"
39    color="success"
40    track-color="warning"
41  />
42</template>
43`},ze={ts:`<script lang="ts" setup>
44const slidersValues = ref([30, 60])
45<\/script>
46
47<template>
48  <VRangeSlider
49    v-model="slidersValues"
50    disabled
51    label="Disabled"
52  />
53</template>
54`,js:`<script setup>
55const slidersValues = ref([
56  30,
57  60,
58])
59<\/script>
60
61<template>
62  <VRangeSlider
63    v-model="slidersValues"
64    disabled
65    label="Disabled"
66  />
67</template>
68`},Ie={ts:`<script lang="ts" setup>
69const sliderValues = ref([20, 40])
70<\/script>
71
72<template>
73  <VRangeSlider
74    v-model="sliderValues"
75    step="10"
76  />
77</template>
78`,js:`<script setup>
79const sliderValues = ref([
80  20,
81  40,
82])
83<\/script>
84
85<template>
86  <VRangeSlider
87    v-model="sliderValues"
88    step="10"
89  />
90</template>
91`},Le={ts:`<script lang="ts" setup>
92const seasons = ['Winter', 'Spring', 'Summer', 'Fall']
93const icons = ['tabler-snowflake', 'tabler-leaf', 'tabler-flame', 'tabler-droplet']
94const sliderValues = ref([1, 2])
95<\/script>
96
97<template>
98  <VRangeSlider
99    v-model="sliderValues"
100    :tick="seasons"
101    min="0"
102    max="3"
103    :step="1"
104    show-ticks="always"
105    thumb-label
106    tick-size="4"
107  >
108    <template #thumb-label="{ modelValue }">
109      <VIcon :icon="icons[modelValue]" />
110    </template>
111  </VRangeSlider>
112</template>
113`,js:`<script setup>
114const seasons = [

115  'Winter',
116  'Spring',
117  'Summer',
118  'Fall',
119]
120
121const icons = [
122  'tabler-snowflake',
123  'tabler-leaf',
124  'tabler-flame',
125  'tabler-droplet',
126]
127
128const sliderValues = ref([
129  1,
130  2,
131])
132<\/script>
133
134<template>
135  <VRangeSlider
136    v-model="sliderValues"
137    :tick="seasons"
138    min="0"
139    max="3"
140    :step="1"
141    show-ticks="always"
142    thumb-label
143    tick-size="4"
144  >
145    <template #thumb-label="{ modelValue }">
146      <VIcon :icon="icons[modelValue]" />
147    </template>
148  </VRangeSlider>
149</template>
150`},Ne={ts:`<script lang="ts" setup>
151const sliderValues = ref([20, 40])
152<\/script>
153
154<template>
155  <VRangeSlider
156    v-model="sliderValues"
157    direction="vertical"
158  />
159</template>
160`,js:`<script setup>
161const sliderValues = ref([
162  20,
163  40,
164])
165<\/script>
166
167<template>
168  <VRangeSlider
169    v-model="sliderValues"
170    direction="vertical"
171  />
172</template>
173`},We=Object.freeze(Object.defineProperty({__proto__:null,basic:Me,color:Ue,disabled:ze,step:Ie,thumbLabel:Le,vertical:Ne},Symbol.toStringTag,{value:"Module"})),Ae=h({__name:"range-slider",setup(s,{expose:e}){e();const t={get demoCode(){return We}};return Object.defineProperty(t,"__isScriptSetup",{enumerable:!1,value:!0}),t}});function Ke(s,e,t,l,r,n){const u=Fe,S=ve,F=je,O=Ce,a=ye,v=$e,M=Se;return $(),k(ce,null,{default:m(()=>[o(x,{cols:"12",md:"6"},{default:m(()=>[o(S,{title:"Basic",code:l.demoCode.basic},{default:m(()=>[e[0]||(e[0]=c("p",null,[f("The "),c("code",null,"v-slider"),f(" component is a better visualization of the number input.")],-1)),o(u)]),_:1},8,["code"])]),_:1}),o(x,{cols:"12",md:"6"},{default:m(()=>[o(S,{title:"Disabled",code:l.demoCode.disabled},{default:m(()=>[e[1]||(e[1]=c("p",null,[f("You cannot interact with "),c("code",null,"disabled"),f(" sliders.")],-1)),o(F)]),_:1},8,["code"])]),_:1}),o(x,{cols:"12",md:"6"},{default:m(()=>[o(S,{title:"Color",code:l.demoCode.color},{default:m(()=>[e[2]||(e[2]=c("p",null,[f("Use "),c("code",null,"color"),f(" prop to the sets the slider color. "),c("code",null,"track-color"),f(" prop to sets the color of slider's unfilled track.")],-1)),o(O)]),_:1},8,["code"])]),_:1}),o(x,{cols:"12",md:"6"},{default:m(()=>[o(S,{title:"Step",code:l.demoCode.step},{default:m(()=>[e[3]||(e[3]=c("p",null,[c("code",null,"v-range-slider"),f(" can have steps other than 1. This can be helpful for some applications where you need to adjust values with more or less accuracy.")],-1)),o(a)]),_:1},8,["code"])]),_:1}),o(x,{cols:"12",md:"6"},{default:m(()=>[o(S,{title:"Thumb label",code:l.demoCode.thumbLabel},{default:m(()=>[e[4]||(e[4]=c("p",null,[f(" Using the "),c("code",null,"tick-labels"),f(" prop along with the "),c("code",null,"thumb-label"),f(" slot, you can create a very customized solution. ")],-1)),o(v)]),_:1},8,["code"])]),_:1}),o(x,{cols:"12",md:"6"},{default:m(()=>[o(S,{title:"Vertical",code:l.demoCode.vertical},{default:m(()=>[e[5]||(e[5]=c("p",null,[f("You can use the "),c("code",null,"vertical"),f(" prop to switch sliders to a vertical orientation. If you need to change the height of the slider, use css.")],-1)),o(M)]),_:1},8,["code"])]),_:1})]),_:1})}const Ge=R(Ae,[["render",Ke],["__file","/opt/buildhome/repo/src/pages/forms/range-slider.vue"]]);export{Ge as default};