@vime/core/dist/vime/p-ec5fd307.entry.js

Customizable, extensible, accessible and framework agnostic media player.

import{r,c as t,h as e,g as i}from"./p-aa8acb66.js";import{c as a}from"./p-b018976f.js";const s=class{constructor(e){r(this,e),this.vmValueChange=t(this,"vmValueChange",7),this.vmFocus=t(this,"vmFocus",7),this.vmBlur=t(this,"vmBlur",7),this.step=1,this.min=0,this.max=10,this.value=5,a(this)}getPercentage(){return this.value/this.max*100+"%"}onValueChange(r){var t;const e=parseFloat(null===(t=r.target)||void 0===t?void 0:t.value);this.vmValueChange.emit(e)}calcTouchedValue(r){const t=r.target,e=r.changedTouches[0],i=parseFloat(t.getAttribute("min")),a=parseFloat(t.getAttribute("max")),s=parseFloat(t.getAttribute("step")),o=a-i;let h;const n=t.getBoundingClientRect(),l=parseFloat(window.getComputedStyle(this.host).getPropertyValue("--vm-slider-thumb-width")),u=100/n.width*(l/2)/100;h=100/n.width*(e.clientX-n.left),h=Math.max(0,Math.min(h,100)),h<50?h-=(100-2*h)*u:h>50&&(h+=2*(h-50)*u);const d=o*(h/100);return s>=1?i+Math.round(d/s)*s:i+parseFloat(d.toFixed(2))}onTouch(r){const t=r.target;t.disabled||(r.preventDefault(),this.value=this.calcTouchedValue(r),this.vmValueChange.emit(this.value),t.dispatchEvent(new window.Event("touchend"===r.type?"change":"input",{bubbles:!0})))}render(){var r;return e("div",{class:"slider",style:{"--vm-value":this.getPercentage()}},e("input",{type:"range",step:this.step,min:this.min,max:this.max,value:this.value,autocomplete:"off","aria-label":this.label,"aria-valuemin":this.min,"aria-valuemax":this.max,"aria-valuenow":this.value,"aria-valuetext":null!==(r=this.valueText)&&void 0!==r?r:this.getPercentage(),"aria-orientation":"horizontal",onInput:this.onValueChange.bind(this),onFocus:()=>{this.vmFocus.emit()},onBlur:()=>{this.vmBlur.emit()},onTouchStart:this.onTouch.bind(this),onTouchMove:this.onTouch.bind(this),onTouchEnd:this.onTouch.bind(this)}))}get host(){return i(this)}};s.style=":host{width:100%}.slider{width:100%}input{width:100%;-webkit-appearance:none;background:transparent;border:0;outline:0;cursor:pointer;box-sizing:border-box;border-radius:calc(var(--vm-slider-thumb-height) * 2);user-select:none;-webkit-user-select:none;touch-action:manipulation;color:var(--vm-slider-value-color);display:block;height:var(--vm-slider-track-height);margin:0;padding:0;transition:box-shadow 0.3s ease}input::-webkit-slider-runnable-track{background:transparent;border:0;border-radius:calc(var(--vm-slider-track-height) / 2);height:var(--vm-slider-track-height);transition:box-shadow 0.3s ease;user-select:none;background-image:linear-gradient(\n    to right,\n    currentColor var(--vm-value, 0%),\n    transparent var(--vm-value, 0%)\n  );background-color:var(--vm-slider-track-color)}input::-webkit-slider-thumb{opacity:0;background:var(--vm-slider-thumb-bg);border:0;border-radius:100%;position:relative;transition:all 0.2s ease;width:var(--vm-slider-thumb-width);height:var(--vm-slider-thumb-height);box-shadow:var(--vm-slider-thumb-shadow);-webkit-appearance:none;margin-top:calc(\n    0px -\n      calc(\n        calc(var(--vm-slider-thumb-height) - var(--vm-slider-track-height)) / 2\n      )\n  )}input::-moz-range-track{background:transparent;border:0;border-radius:calc(var(--vm-slider-track-height) / 2);height:var(--vm-slider-track-height);transition:box-shadow 0.3s ease;user-select:none;background-color:var(--vm-slider-track-color)}input::-moz-range-thumb{opacity:0;background:var(--vm-slider-thumb-bg);border:0;border-radius:100%;position:relative;transition:all 0.2s ease;width:var(--vm-slider-thumb-width);height:var(--vm-slider-thumb-height);box-shadow:var(--vm-slider-thumb-shadow)}input::-moz-range-progress{background:currentColor;border-radius:calc(var(--vm-slider-track-height) / 2);height:var(--vm-slider-track-height)}input::-ms-track{border:0;border-radius:calc(var(--vm-slider-track-height) / 2);height:var(--vm-slider-track-height);transition:box-shadow 0.3s ease;user-select:none;color:transparent;background-color:var(--vm-slider-track-color)}input::-ms-fill-upper{background:transparent;border:0;border-radius:calc(var(--vm-slider-track-height) / 2);height:var(--vm-slider-track-height);transition:box-shadow 0.3s ease;user-select:none}input::-ms-fill-lower{border:0;border-radius:calc(var(--vm-slider-track-height) / 2);height:var(--vm-slider-track-height);transition:box-shadow 0.3s ease;user-select:none;background:currentColor}input::-ms-thumb{opacity:0;background:var(--vm-slider-thumb-bg);border:0;border-radius:100%;position:relative;transition:all 0.2s ease;width:var(--vm-slider-thumb-width);height:var(--vm-slider-thumb-height);box-shadow:var(--vm-slider-thumb-shadow);margin-top:0}input::-ms-tooltip{display:none}input:hover::-webkit-slider-runnable-track{height:var(--vm-slider-track-focused-height)}input:hover::-moz-range-track{height:var(--vm-slider-track-focused-height)}input:hover::-ms-track{height:var(--vm-slider-track-focused-height)}input:hover::-ms-fill-upper{height:var(--vm-slider-track-focused-height)}input:hover::-ms-fill-lower{height:var(--vm-slider-track-focused-height)}input:hover::-webkit-slider-thumb{opacity:1}input:hover::-moz-range-thumb{opacity:1}input:hover::-ms-thumb{opacity:1}input:focus{outline:0}input:focus::-webkit-slider-runnable-track{outline:0;height:var(--vm-slider-track-focused-height)}input:focus::-moz-range-track{outline:0;height:var(--vm-slider-track-focused-height)}input:focus::-ms-track{outline:0;height:var(--vm-slider-track-focused-height)}input::-moz-focus-outer{border:0}";export{s as vm_slider}