Skip to content

Commit

Permalink
build files
Browse files Browse the repository at this point in the history
  • Loading branch information
@matbind
matbind committed Mar 7, 2020
1 parent 457db75 commit bd1c676
Show file tree
Hide file tree
Showing 3 changed files with 54 additions and 18 deletions.
24 changes: 18 additions & 6 deletions dist/vue-slider-with-indicator.esm.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ var script = {
data: function data () {
return {
settings: {
init: 20,
init: 50,
max: 100,
min: 0,
step: 1,
Expand All @@ -48,14 +48,18 @@ var script = {
}
},
props: {
sliderValue: [Number, String],
indicatorValue: [Number, String],
sliderValue: Number,
indicatorValue: Number,
options: Object
},
computed: {
calculatedSliderValue: {
get: function get () {
return this.sliderValue || this.settings.init
var valueOrDefault =
this.sliderValue === 'undefined'
? this.settings.init
: this.sliderValue;
return valueOrDefault
},
set: function set (val) {
this.$emit('input', val);
Expand Down Expand Up @@ -100,6 +104,14 @@ var script = {
}
},
mounted: function mounted () {

if (isNaN(this.sliderValue)) {
console.error(("Expected Number for 'sliderValue', instead got " + (this.sliderValue) + "."));
}
if (isNaN(this.indicatorValue)) {
console.error(("Expected Number for 'indicatorValue', instead got " + (this.indicatorValue) + "."));
}

if (this.options) {
for (var opt in this.options) {
if (opt !== 'style') {
Expand Down Expand Up @@ -318,11 +330,11 @@ __vue_render__._withStripped = true;
/* style */
var __vue_inject_styles__ = function (inject) {
if (!inject) { return }
inject("data-v-36c2bb0b_0", { source: "\n.slider-container[data-v-36c2bb0b] {\n width: var(--sliderWidth);\n height: var(--sliderHeight);\n display: flex;\n}\n\n/* From:\nhttps://www.w3schools.com/howto/howto_js_rangeslider.asp */\n.slider[data-v-36c2bb0b] {\n -webkit-appearance: none;\n appearance: none;\n width: var(--sliderWidth);\n height: var(--sliderHeight);\n background-color: var(--backgroundColor);\n transform-origin: var(--transformOrigin);\n transform: var(--rotation);\n direction: var(--direction);\n}\n.synth-slider[data-v-36c2bb0b]::-webkit-slider-thumb {\n -webkit-appearance: none; /* Override default look */\n appearance: none;\n width: var(--handleWidth); /* Set a specific slider handle width */\n height: var(--handleHeight); /* Slider handle height */\n background-color: var(--handleColor); /* Green background */\n border: none;\n border-radius: 0;\n cursor: pointer; /* Cursor on hover */\n}\n.synth-slider[data-v-36c2bb0b]::-moz-range-thumb {\n width: var(--handleWidth); /* Set a specific slider handle width */\n height: var(--handleHeight); /* Slider handle height */\n background-color: var(--handleColor); /* Green background */\n border: none;\n border-radius: 0;\n cursor: pointer; /* Cursor on hover */\n}\n.modulation-indicator[data-v-36c2bb0b] {\n position: absolute;\n background: none;\n pointer-events: none;\n}\n.modulation-indicator[data-v-36c2bb0b]::-webkit-slider-thumb {\n -webkit-appearance: none; /* Override default look */\n appearance: none;\n width: var(--indicatorWidth); /* Set a specific slider handle width */\n height: var(--indicatorHeight); /* Slider handle height */\n background-color: var(--indicatorColor);\n border: none;\n border-radius: 0;\n}\n.modulation-indicator[data-v-36c2bb0b]::-moz-range-thumb {\n width: var(--indicatorWidth); /* Set a specific slider handle width */\n height: var(--indicatorHeight); /* Slider handle height */\n background: var(--indicatorColor);\n border: none;\n border-radius: 0;\n}\n\n", map: {"version":3,"sources":["D:\\projects\\npm\\VueSliderWithIndicator\\src\\VueSliderWithIndicator.vue"],"names":[],"mappings":";AA6HA;EACA,yBAAA;EACA,2BAAA;EACA,aAAA;AACA;;AAEA;0DACA;AACA;EACA,wBAAA;EACA,gBAAA;EACA,yBAAA;EACA,2BAAA;EACA,wCAAA;EACA,wCAAA;EACA,0BAAA;EACA,2BAAA;AACA;AAEA;EACA,wBAAA,EAAA,0BAAA;EACA,gBAAA;EACA,yBAAA,EAAA,uCAAA;EACA,2BAAA,EAAA,yBAAA;EACA,oCAAA,EAAA,qBAAA;EACA,YAAA;EACA,gBAAA;EACA,eAAA,EAAA,oBAAA;AACA;AAEA;EACA,yBAAA,EAAA,uCAAA;EACA,2BAAA,EAAA,yBAAA;EACA,oCAAA,EAAA,qBAAA;EACA,YAAA;EACA,gBAAA;EACA,eAAA,EAAA,oBAAA;AACA;AAEA;EACA,kBAAA;EACA,gBAAA;EACA,oBAAA;AACA;AAEA;EACA,wBAAA,EAAA,0BAAA;EACA,gBAAA;EACA,4BAAA,EAAA,uCAAA;EACA,8BAAA,EAAA,yBAAA;EACA,uCAAA;EACA,YAAA;EACA,gBAAA;AACA;AAEA;EACA,4BAAA,EAAA,uCAAA;EACA,8BAAA,EAAA,yBAAA;EACA,iCAAA;EACA,YAAA;EACA,gBAAA;AACA","file":"VueSliderWithIndicator.vue","sourcesContent":["<template>\n <div class=\"slider-container\" :style=\"containerStyle\">\n <input\n type=\"range\"\n class=\"slider synth-slider\"\n :style=\"sliderStyle\"\n :max=\"settings.max\"\n :min=\"settings.min\"\n :step=\"settings.step\"\n v-model=\"calculatedSliderValue\"\n >\n <input\n type=\"range\"\n class=\"slider modulation-indicator\"\n :style=\"indicatorStyle\"\n :max=\"settings.max\"\n :min=\"settings.min\"\n :step=\"settings.step\"\n v-model=\"indicatorValue\"\n >\n </div>\n</template>\n\n<script>\nexport default {\n name: 'VueSliderWithIndicator',\n data () {\n return {\n settings: {\n init: 20,\n max: 100,\n min: 0,\n step: 1,\n style: {\n vertical: false,\n direction: 'ltr',\n sliderWidth: '500px',\n sliderHeight: '50px',\n backgroundColor: 'black',\n handleWidth: '50px',\n handleHeight: '50px',\n handleColor: '#4CAF50',\n indicatorWidth: '5px',\n indicatorHeight: '50px',\n indicatorColor: 'rgba(255, 136, 0, 0.7)'\n }\n }\n }\n },\n props: {\n sliderValue: [Number, String],\n indicatorValue: [Number, String],\n options: Object\n },\n computed: {\n calculatedSliderValue: {\n get () {\n return this.sliderValue || this.settings.init\n },\n set (val) {\n this.$emit('input', val)\n }\n },\n // Setting up CSS variables from the values of the style object.\n // Necessary because pseudo elements like the handle can't be\n // accessed inline.\n containerStyle () {\n let transformOrigin = null\n let rotation = null\n if (this.settings.style.vertical) {\n const sliderWidth = this.settings.style.sliderWidth\n const widthValue = sliderWidth.match(/\\d+/g)[0]\n const widthUnit = sliderWidth.slice(sliderWidth.match(/\\d+/g)[0].length)\n transformOrigin = `${widthValue / 2 + widthUnit} ${widthValue / 2 + widthUnit}`\n rotation = 'rotate(-90deg)'\n }\n\n return {\n '--sliderWidth': this.settings.style.sliderWidth,\n '--sliderHeight': this.settings.style.sliderHeight,\n '--backgroundColor': this.settings.style.backgroundColor,\n '--transformOrigin': transformOrigin,\n '--rotation': rotation,\n '--direction': this.settings.style.direction\n }\n },\n sliderStyle () {\n return {\n '--handleWidth': this.settings.style.handleWidth,\n '--handleHeight': this.settings.style.handleHeight,\n '--handleColor': this.settings.style.handleColor\n }\n },\n indicatorStyle () {\n return {\n '--indicatorWidth': this.settings.style.indicatorWidth,\n '--indicatorHeight': this.settings.style.indicatorHeight,\n '--indicatorColor': this.settings.style.indicatorColor\n }\n }\n },\n mounted () {\n if (this.options) {\n for (let opt in this.options) {\n if (opt !== 'style') {\n this.settings[opt] = this.options[opt]\n }\n }\n // If sliderHeight is set, make handle and indicator take up full height\n if (this.options.style) {\n if (Object.keys(this.options.style).includes('sliderHeight')) {\n this.settings.style.handleHeight = this.options.style['sliderHeight']\n this.settings.style.indicatorHeight = this.options.style['sliderHeight']\n }\n for (let styling in this.options.style) {\n this.settings.style[styling] = this.options.style[styling]\n }\n }\n }\n }\n}\n</script>\n\n<!-- Add \"scoped\" attribute to limit CSS to this component only -->\n<style scoped>\n.slider-container {\n width: var(--sliderWidth);\n height: var(--sliderHeight);\n display: flex;\n}\n\n/* From:\nhttps://www.w3schools.com/howto/howto_js_rangeslider.asp */\n.slider {\n -webkit-appearance: none;\n appearance: none;\n width: var(--sliderWidth);\n height: var(--sliderHeight);\n background-color: var(--backgroundColor);\n transform-origin: var(--transformOrigin);\n transform: var(--rotation);\n direction: var(--direction);\n}\n\n.synth-slider::-webkit-slider-thumb {\n -webkit-appearance: none; /* Override default look */\n appearance: none;\n width: var(--handleWidth); /* Set a specific slider handle width */\n height: var(--handleHeight); /* Slider handle height */\n background-color: var(--handleColor); /* Green background */\n border: none;\n border-radius: 0;\n cursor: pointer; /* Cursor on hover */\n}\n\n.synth-slider::-moz-range-thumb {\n width: var(--handleWidth); /* Set a specific slider handle width */\n height: var(--handleHeight); /* Slider handle height */\n background-color: var(--handleColor); /* Green background */\n border: none;\n border-radius: 0;\n cursor: pointer; /* Cursor on hover */\n}\n\n.modulation-indicator {\n position: absolute;\n background: none;\n pointer-events: none;\n}\n\n.modulation-indicator::-webkit-slider-thumb {\n -webkit-appearance: none; /* Override default look */\n appearance: none;\n width: var(--indicatorWidth); /* Set a specific slider handle width */\n height: var(--indicatorHeight); /* Slider handle height */\n background-color: var(--indicatorColor);\n border: none;\n border-radius: 0;\n}\n\n.modulation-indicator::-moz-range-thumb {\n width: var(--indicatorWidth); /* Set a specific slider handle width */\n height: var(--indicatorHeight); /* Slider handle height */\n background: var(--indicatorColor);\n border: none;\n border-radius: 0;\n}\n\n</style>\n"]}, media: undefined });
inject("data-v-909eb764_0", { source: "\n.slider-container[data-v-909eb764] {\n width: var(--sliderWidth);\n height: var(--sliderHeight);\n display: flex;\n}\n\n/* From:\nhttps://www.w3schools.com/howto/howto_js_rangeslider.asp */\n.slider[data-v-909eb764] {\n -webkit-appearance: none;\n appearance: none;\n width: var(--sliderWidth);\n height: var(--sliderHeight);\n background-color: var(--backgroundColor);\n transform-origin: var(--transformOrigin);\n transform: var(--rotation);\n direction: var(--direction);\n}\n.synth-slider[data-v-909eb764]::-webkit-slider-thumb {\n -webkit-appearance: none; /* Override default look */\n appearance: none;\n width: var(--handleWidth); /* Set a specific slider handle width */\n height: var(--handleHeight); /* Slider handle height */\n background-color: var(--handleColor); /* Green background */\n border: none;\n border-radius: 0;\n cursor: pointer; /* Cursor on hover */\n}\n.synth-slider[data-v-909eb764]::-moz-range-thumb {\n width: var(--handleWidth); /* Set a specific slider handle width */\n height: var(--handleHeight); /* Slider handle height */\n background-color: var(--handleColor); /* Green background */\n border: none;\n border-radius: 0;\n cursor: pointer; /* Cursor on hover */\n}\n.modulation-indicator[data-v-909eb764] {\n position: absolute;\n background: none;\n pointer-events: none;\n}\n.modulation-indicator[data-v-909eb764]::-webkit-slider-thumb {\n -webkit-appearance: none; /* Override default look */\n appearance: none;\n width: var(--indicatorWidth); /* Set a specific slider handle width */\n height: var(--indicatorHeight); /* Slider handle height */\n background-color: var(--indicatorColor);\n border: none;\n border-radius: 0;\n}\n.modulation-indicator[data-v-909eb764]::-moz-range-thumb {\n width: var(--indicatorWidth); /* Set a specific slider handle width */\n height: var(--indicatorHeight); /* Slider handle height */\n background: var(--indicatorColor);\n border: none;\n border-radius: 0;\n}\n\n", map: {"version":3,"sources":["D:\\projects\\npm\\VueSliderWithIndicator\\src\\VueSliderWithIndicator.vue"],"names":[],"mappings":";AAyIA;EACA,yBAAA;EACA,2BAAA;EACA,aAAA;AACA;;AAEA;0DACA;AACA;EACA,wBAAA;EACA,gBAAA;EACA,yBAAA;EACA,2BAAA;EACA,wCAAA;EACA,wCAAA;EACA,0BAAA;EACA,2BAAA;AACA;AAEA;EACA,wBAAA,EAAA,0BAAA;EACA,gBAAA;EACA,yBAAA,EAAA,uCAAA;EACA,2BAAA,EAAA,yBAAA;EACA,oCAAA,EAAA,qBAAA;EACA,YAAA;EACA,gBAAA;EACA,eAAA,EAAA,oBAAA;AACA;AAEA;EACA,yBAAA,EAAA,uCAAA;EACA,2BAAA,EAAA,yBAAA;EACA,oCAAA,EAAA,qBAAA;EACA,YAAA;EACA,gBAAA;EACA,eAAA,EAAA,oBAAA;AACA;AAEA;EACA,kBAAA;EACA,gBAAA;EACA,oBAAA;AACA;AAEA;EACA,wBAAA,EAAA,0BAAA;EACA,gBAAA;EACA,4BAAA,EAAA,uCAAA;EACA,8BAAA,EAAA,yBAAA;EACA,uCAAA;EACA,YAAA;EACA,gBAAA;AACA;AAEA;EACA,4BAAA,EAAA,uCAAA;EACA,8BAAA,EAAA,yBAAA;EACA,iCAAA;EACA,YAAA;EACA,gBAAA;AACA","file":"VueSliderWithIndicator.vue","sourcesContent":["<template>\n <div class=\"slider-container\" :style=\"containerStyle\">\n <input\n type=\"range\"\n class=\"slider synth-slider\"\n :style=\"sliderStyle\"\n :max=\"settings.max\"\n :min=\"settings.min\"\n :step=\"settings.step\"\n v-model=\"calculatedSliderValue\"\n >\n <input\n type=\"range\"\n class=\"slider modulation-indicator\"\n :style=\"indicatorStyle\"\n :max=\"settings.max\"\n :min=\"settings.min\"\n :step=\"settings.step\"\n v-model=\"indicatorValue\"\n >\n </div>\n</template>\n\n<script>\nexport default {\n name: 'VueSliderWithIndicator',\n data () {\n return {\n settings: {\n init: 50,\n max: 100,\n min: 0,\n step: 1,\n style: {\n vertical: false,\n direction: 'ltr',\n sliderWidth: '500px',\n sliderHeight: '50px',\n backgroundColor: 'black',\n handleWidth: '50px',\n handleHeight: '50px',\n handleColor: '#4CAF50',\n indicatorWidth: '5px',\n indicatorHeight: '50px',\n indicatorColor: 'rgba(255, 136, 0, 0.7)'\n }\n }\n }\n },\n props: {\n sliderValue: Number,\n indicatorValue: Number,\n options: Object\n },\n computed: {\n calculatedSliderValue: {\n get () {\n const valueOrDefault =\n this.sliderValue === 'undefined'\n ? this.settings.init\n : this.sliderValue\n return valueOrDefault\n },\n set (val) {\n this.$emit('input', val)\n }\n },\n // Setting up CSS variables from the values of the style object.\n // Necessary because pseudo elements like the handle can't be\n // accessed inline.\n containerStyle () {\n let transformOrigin = null\n let rotation = null\n if (this.settings.style.vertical) {\n const sliderWidth = this.settings.style.sliderWidth\n const widthValue = sliderWidth.match(/\\d+/g)[0]\n const widthUnit = sliderWidth.slice(sliderWidth.match(/\\d+/g)[0].length)\n transformOrigin = `${widthValue / 2 + widthUnit} ${widthValue / 2 + widthUnit}`\n rotation = 'rotate(-90deg)'\n }\n\n return {\n '--sliderWidth': this.settings.style.sliderWidth,\n '--sliderHeight': this.settings.style.sliderHeight,\n '--backgroundColor': this.settings.style.backgroundColor,\n '--transformOrigin': transformOrigin,\n '--rotation': rotation,\n '--direction': this.settings.style.direction\n }\n },\n sliderStyle () {\n return {\n '--handleWidth': this.settings.style.handleWidth,\n '--handleHeight': this.settings.style.handleHeight,\n '--handleColor': this.settings.style.handleColor\n }\n },\n indicatorStyle () {\n return {\n '--indicatorWidth': this.settings.style.indicatorWidth,\n '--indicatorHeight': this.settings.style.indicatorHeight,\n '--indicatorColor': this.settings.style.indicatorColor\n }\n }\n },\n mounted () {\n\n if (isNaN(this.sliderValue)) {\n console.error(`Expected Number for 'sliderValue', instead got ${this.sliderValue}.`)\n }\n if (isNaN(this.indicatorValue)) {\n console.error(`Expected Number for 'indicatorValue', instead got ${this.indicatorValue}.`)\n }\n\n if (this.options) {\n for (let opt in this.options) {\n if (opt !== 'style') {\n this.settings[opt] = this.options[opt]\n }\n }\n // If sliderHeight is set, make handle and indicator take up full height\n if (this.options.style) {\n if (Object.keys(this.options.style).includes('sliderHeight')) {\n this.settings.style.handleHeight = this.options.style['sliderHeight']\n this.settings.style.indicatorHeight = this.options.style['sliderHeight']\n }\n for (let styling in this.options.style) {\n this.settings.style[styling] = this.options.style[styling]\n }\n }\n }\n }\n}\n</script>\n\n<!-- Add \"scoped\" attribute to limit CSS to this component only -->\n<style scoped>\n.slider-container {\n width: var(--sliderWidth);\n height: var(--sliderHeight);\n display: flex;\n}\n\n/* From:\nhttps://www.w3schools.com/howto/howto_js_rangeslider.asp */\n.slider {\n -webkit-appearance: none;\n appearance: none;\n width: var(--sliderWidth);\n height: var(--sliderHeight);\n background-color: var(--backgroundColor);\n transform-origin: var(--transformOrigin);\n transform: var(--rotation);\n direction: var(--direction);\n}\n\n.synth-slider::-webkit-slider-thumb {\n -webkit-appearance: none; /* Override default look */\n appearance: none;\n width: var(--handleWidth); /* Set a specific slider handle width */\n height: var(--handleHeight); /* Slider handle height */\n background-color: var(--handleColor); /* Green background */\n border: none;\n border-radius: 0;\n cursor: pointer; /* Cursor on hover */\n}\n\n.synth-slider::-moz-range-thumb {\n width: var(--handleWidth); /* Set a specific slider handle width */\n height: var(--handleHeight); /* Slider handle height */\n background-color: var(--handleColor); /* Green background */\n border: none;\n border-radius: 0;\n cursor: pointer; /* Cursor on hover */\n}\n\n.modulation-indicator {\n position: absolute;\n background: none;\n pointer-events: none;\n}\n\n.modulation-indicator::-webkit-slider-thumb {\n -webkit-appearance: none; /* Override default look */\n appearance: none;\n width: var(--indicatorWidth); /* Set a specific slider handle width */\n height: var(--indicatorHeight); /* Slider handle height */\n background-color: var(--indicatorColor);\n border: none;\n border-radius: 0;\n}\n\n.modulation-indicator::-moz-range-thumb {\n width: var(--indicatorWidth); /* Set a specific slider handle width */\n height: var(--indicatorHeight); /* Slider handle height */\n background: var(--indicatorColor);\n border: none;\n border-radius: 0;\n}\n\n</style>\n"]}, media: undefined });

};
/* scoped */
var __vue_scope_id__ = "data-v-36c2bb0b";
var __vue_scope_id__ = "data-v-909eb764";
/* module identifier */
var __vue_module_identifier__ = undefined;
/* functional template */
Expand Down
Loading

0 comments on commit bd1c676

Please sign in to comment.