1 line
4.0 KiB
JavaScript
Executable File
1 line
4.0 KiB
JavaScript
Executable File
function createSlider(e,t,i){e&&"undefined"!=typeof noUiSlider&&(i&&(e.style.height=i),noUiSlider.create(e,t))}function createSliderGroup(e,t){e=document.querySelectorAll(e);0<e.length&&e.forEach(e=>{createSlider(e,"function"==typeof t?t(e):t)})}createSliderGroup('[data-slider="default"]',e=>({start:parseInt(e.getAttribute("data-value"))||50,connect:"lower",range:{min:0,max:255}})),createSliderGroup("#rangeslider_multielement",{start:[20,80],connect:!0,range:{min:0,max:100}});let nonLinearSlider=document.getElementById("nonlinear");if(nonLinearSlider){let n=document.getElementById("lower-value"),o=document.getElementById("upper-value");createSlider(nonLinearSlider,{connect:!0,behaviour:"tap",start:[500,4e3],range:{min:[0],"10%":[500,500],"50%":[4e3,1e3],max:[1e4]}}),n&&o&&nonLinearSlider.noUiSlider.on("update",(e,t,i,r,l)=>{[n,o][t].innerHTML=`${e[t]}, ${l[t].toFixed(2)}%`})}let lockedState=!1,lockedValues=[60,80],slider1=document.getElementById("slider1"),slider2=document.getElementById("slider2"),lockButton=document.getElementById("lockbutton"),slider1Value=document.getElementById("slider1-span"),slider2Value=document.getElementById("slider2-span");function crossUpdate(e,t){var i,r;lockedState&&(r=1-(i=slider1===t?0:1),e-=lockedValues[r]-lockedValues[i],t.noUiSlider.set(e))}function setLockedValues(){lockedValues=[Number(slider1.noUiSlider.get()),Number(slider2.noUiSlider.get())]}slider1&&slider2&&(createSlider(slider1,{start:60,animate:!1,range:{min:50,max:100}}),createSlider(slider2,{start:80,animate:!1,range:{min:50,max:100}}),slider1.noUiSlider.on("update",(e,t)=>slider1Value.innerHTML=e[t]),slider2.noUiSlider.on("update",(e,t)=>slider2Value.innerHTML=e[t]),slider1.noUiSlider.on("change",setLockedValues),slider2.noUiSlider.on("change",setLockedValues),slider1.noUiSlider.on("slide",(e,t)=>crossUpdate(e[t],slider2)),slider2.noUiSlider.on("slide",(e,t)=>crossUpdate(e[t],slider1)),lockButton)&&lockButton.addEventListener("click",()=>{lockedState=!lockedState,lockButton.innerHTML=lockedState?'<i class="ti ti-lock-off me-1"></i> Unlock':'<i class="ti ti-lock me-1"></i> Lock'});let mergingTooltipSlider=document.getElementById("slider-merging-tooltips");function mergeTooltips(e,g,S){if(e&&e.noUiSlider){let s="rtl"===getComputedStyle(e).direction,c="rtl"===e.noUiSlider.options.direction,m="vertical"===e.noUiSlider.options.orientation,u=e.noUiSlider.getTooltips(),i=e.noUiSlider.getOrigins();u.forEach((e,t)=>{e&&i[t].appendChild(e)}),e.noUiSlider.on("update",(t,e,i,r,l)=>{let n=[[]],o=[[]],d=[[]],a=0;u[0]&&(n[0][0]=0,o[0][0]=l[0],d[0][0]=t[0]);for(let e=1;e<l.length;e++)(!u[e]||l[e]-l[e-1]>g)&&(a++,n[a]=[],d[a]=[],o[a]=[]),u[e]&&(n[a].push(e),d[a].push(t[e]),o[a].push(l[e]));n.forEach((e,l)=>{let n=e.length;e.forEach((e,t)=>{var i,r;t===n-1?(t=c?0:n-1,r=o[l].reduce((e,t)=>e+1e3-t,0),t=1e3-o[l][t],i=m?"bottom":"right",r=(s&&!m?100:0)+r/n-t,u[e].innerHTML=d[l].join(S),u[e].style.display="block",u[e].style[i]=r+"%"):u[e].style.display="none"})})})}}mergingTooltipSlider&&(createSlider(mergingTooltipSlider,{start:[20,75],connect:!0,tooltips:[!0,!0],range:{min:0,max:100}}),mergeTooltips(mergingTooltipSlider,5," - "));let softSlider=document.getElementById("soft");softSlider&&(createSlider(softSlider,{start:50,range:{min:0,max:100},pips:{mode:"values",values:[20,80],density:4}}),softSlider.noUiSlider.on("change",(e,t)=>{e[t]<20?softSlider.noUiSlider.set(20):80<e[t]&&softSlider.noUiSlider.set(80)})),createSliderGroup("#slider-vertical",{start:[40,60],connect:!0,behaviour:"drag",orientation:"vertical",range:{min:0,max:100}}),createSlider(document.getElementById("slider-connect-upper"),{start:40,orientation:"vertical",behaviour:"drag",connect:"upper",range:{min:0,max:100}},"200px"),createSlider(document.getElementById("slider-vertical-tooltip"),{start:10,orientation:"vertical",behaviour:"drag",tooltips:!0,range:{min:0,max:100}},"200px"),createSlider(document.getElementById("slider-vertical-limit"),{start:[0,40],orientation:"vertical",behaviour:"drag",limit:60,connect:!0,tooltips:!0,range:{min:0,max:100}},"200px"); |