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 42bc6ff commit 628c544
Show file tree
Hide file tree
Showing 3 changed files with 66 additions and 21 deletions.
29 changes: 22 additions & 7 deletions dist/vue-slider-with-indicator.esm.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,11 +27,13 @@ var script = {
data: function data () {
return {
settings: {
init: 50,
init: 20,
max: 100,
min: 0,
step: 1,
style: {
vertical: false,
direction: 'ltr',
sliderWidth: '500px',
sliderHeight: '50px',
backgroundColor: 'black',
Expand All @@ -46,14 +48,14 @@ var script = {
}
},
props: {
sliderValue: Number,
indicatorValue: Number,
sliderValue: [Number, String],
indicatorValue: [Number, String],
options: Object
},
computed: {
calculatedSliderValue: {
get: function get () {
return this.sliderValue
return this.sliderValue || this.settings.init
},
set: function set (val) {
this.$emit('input', val);
Expand All @@ -63,10 +65,23 @@ var script = {
// Necessary because pseudo elements like the handle can't be
// accessed inline.
containerStyle: function containerStyle () {
var transformOrigin = null;
var rotation = null;
if (this.settings.style.vertical) {
var sliderWidth = this.settings.style.sliderWidth;
var widthValue = sliderWidth.match(/\d+/g)[0];
var widthUnit = sliderWidth.slice(sliderWidth.match(/\d+/g)[0].length);
transformOrigin = (widthValue / 2 + widthUnit) + " " + (widthValue / 2 + widthUnit);
rotation = 'rotate(-90deg)';
}

return {
'--sliderWidth': this.settings.style.sliderWidth,
'--sliderHeight': this.settings.style.sliderHeight,
'--backgroundColor': this.settings.style.backgroundColor
'--backgroundColor': this.settings.style.backgroundColor,
'--transformOrigin': transformOrigin,
'--rotation': rotation,
'--direction': this.settings.style.direction
}
},
sliderStyle: function sliderStyle () {
Expand Down Expand Up @@ -303,11 +318,11 @@ __vue_render__._withStripped = true;
/* style */
var __vue_inject_styles__ = function (inject) {
if (!inject) { return }
inject("data-v-c07f2b4c_0", { source: "\n.slider-container[data-v-c07f2b4c] {\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-c07f2b4c] {\n -webkit-appearance: none;\n appearance: none;\n width: var(--sliderWidth);\n height: var(--sliderHeight);\n background-color: var(--backgroundColor);\n}\n.synth-slider[data-v-c07f2b4c]::-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-c07f2b4c]::-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-c07f2b4c] {\n position: absolute;\n background: none;\n pointer-events: none;\n width: var(--sliderWidth);\n height: var(--sliderHeight);\n}\n.modulation-indicator[data-v-c07f2b4c]::-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-c07f2b4c]::-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":";AA8GA;EACA,yBAAA;EACA,2BAAA;EACA,aAAA;AACA;;AAEA;0DACA;AACA;EACA,wBAAA;EACA,gBAAA;EACA,yBAAA;EACA,2BAAA;EACA,wCAAA;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;EACA,yBAAA;EACA,2BAAA;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 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 return this.sliderValue\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 return {\n '--sliderWidth': this.settings.style.sliderWidth,\n '--sliderHeight': this.settings.style.sliderHeight,\n '--backgroundColor': this.settings.style.backgroundColor\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}\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 width: var(--sliderWidth);\n height: var(--sliderHeight);\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-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 });

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

0 comments on commit 628c544

Please sign in to comment.