aesth-vue-range-input/dist/aesth-vue-range-input.min.js

a completely customizable and aesthetic range input component for vue.

var AesthVueRangeInput=function(r){"use strict";!function(r,e){void 0===e&&(e={});var t=e.insertAt;if(r&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===t&&n.firstChild?n.insertBefore(o,n.firstChild):n.appendChild(o),o.styleSheet?o.styleSheet.cssText=r:o.appendChild(document.createTextNode(r))}}('\r\ninput {\r\n  position: relative;\r\n  -webkit-appearance: none;\r\n  margin: 0;\r\n  padding: 5px 0;\r\n  height: 19px;\r\n  width: var(--range-width);\r\n}\r\ninput:focus-visible {\r\n  outline: 2px solid var(--progress-color);\r\n}\r\ninput::-webkit-slider-runnable-track {\r\n  width: 100%;\r\n  height: 3px;\r\n  cursor: pointer;\r\n  background: var(--track-color);\r\n}\r\ninput::before {\r\n  position: absolute;\r\n  content: "";\r\n  top: 13px;\r\n  left: 0;\r\n  width: var(--webkit-progress);\r\n  height: 3px;\r\n  background-color: var(--progress-color);\r\n  cursor: pointer;\r\n}\r\ninput::-webkit-slider-thumb {\r\n  position: relative;\r\n  -webkit-appearance: none;\r\n  box-sizing: content-box;\r\n  border: 1px solid var(--thumb-border-color);\r\n  height: var(--thumb-size);\r\n  width: var(--thumb-size);\r\n  border-radius: var(--thumb-border-radius);\r\n  background-color: #fff;\r\n  cursor: pointer;\r\n  margin: calc((var(--thumb-size) / 2) - var(--thumb-size)) 0 0 0;\r\n}\r\ninput:active::-webkit-slider-thumb {\r\n  transform: scale(1.2);\r\n  background: var(--thumb-border-color);\r\n}\r\ninput::-moz-range-track {\r\n  width: 100%;\r\n  height: 3px;\r\n  cursor: pointer;\r\n  background: var(--track-color);\r\n}\r\ninput::-moz-range-progress {\r\n  height: 3px;\r\n  background-color: var(--progress-color);\r\n}\r\ninput::-moz-focus-outer {\r\n  border: 0;\r\n}\r\ninput::-moz-range-thumb {\r\n  box-sizing: content-box;\r\n  border: 1px solid var(--thumb-border-color);\r\n  height: var(--thumb-size);\r\n  width: var(--thumb-size);\r\n  border-radius: var(--thumb-border-radius);\r\n  background-color: #fff;\r\n  cursor: pointer;\r\n}\r\ninput:active::-moz-range-thumb {\r\n  transform: scale(1.2);\r\n  background: var(--thumb-border-color);\r\n}\r\n');var e={render:function(){var r=this,e=r.$createElement;return(r._self._c||e)("input",{ref:"range",style:{"--range-width":r.rangeWidth,"--progress-color":r.progressColor,"--track-color":r.buffered?"linear-gradient(90deg, "+r.buffered.color+" "+r.buffered.width+", "+r.trackColor+" "+r.buffered.width+")":r.trackColor,"--thumb-border-radius":r.squaredThumb?"0":"50%","--thumb-border-color":r.thumbBorderColor,"--thumb-size":r.thumbSize},attrs:{type:"range",max:r.max},domProps:{value:r.value},on:{input:function(e){return r.$emit("input",e.target.value)}}})},staticRenderFns:[],props:{value:{type:Number,required:!1,default:0},rangeWidth:{type:String,required:!1,default:"100%"},progressColor:{type:String,required:!1,default:"#000c"},buffered:{type:Object,required:!1},trackColor:{type:String,required:!1,default:"#0003"},squaredThumb:{type:Boolean,required:!1,default:!1},thumbBorderColor:{type:String,required:!1,default:"#000"},thumbSize:{type:String,required:!1,default:"20px"},max:{type:Number,required:!1,default:100}},computed:{updateWebkitProgress:function(){var r=this.value/this.max*100+"%";return this.$refs.range.style.setProperty("--webkit-progress",r)}},mounted:function(){this.updateWebkitProgress},watch:{value:function(){this.updateWebkitProgress}}};function t(r){t.installed||(t.installed=!0,r.component("AesthVueRangeInput",e))}var n={install:t},o=null;return"undefined"!=typeof window?o=window.Vue:"undefined"!=typeof global&&(o=global.Vue),o&&o.use(n),r.default=e,r.install=t,Object.defineProperty(r,"__esModule",{value:!0}),r}({});