{"version":3,"sources":["webpack:///./src/components/CustomSlider.vue?8ddb","webpack:///src/components/CustomSlider.vue","webpack:///./src/components/CustomSlider.vue?33a5","webpack:///./src/components/CustomSlider.vue?bdbd","webpack:///./src/components/CustomSlider.vue?4bdb"],"names":["render","_vm","this","_h","$createElement","_c","_self","staticClass","style","attrs","for","name","_v","_s","label","type","id","min","max","maxValue","domProps","value","on","input","$event","$emit","target","blur","checkValueBoundaries","subText","_e","ref","step","focus","_l","index","key","class","selected","click","_m","staticRenderFns","CustomSlidervue_type_script_lang_js_","props","required","default","steps","activeColor","data","sliderWidth","stepDistance","methods","computed","_steps","i","nextNumber","boundaryChanges","cssProps","--active-color","watch","handler","components_CustomSlidervue_type_script_lang_js_","component","Object","componentNormalizer","__webpack_exports__","_node_modules_mini_css_extract_plugin_dist_loader_js_ref_10_oneOf_1_0_node_modules_css_loader_index_js_ref_10_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_10_oneOf_1_2_node_modules_less_loader_dist_cjs_js_ref_10_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_CustomSlider_vue_vue_type_style_index_0_lang_less___WEBPACK_IMPORTED_MODULE_0__","__webpack_require__","_node_modules_mini_css_extract_plugin_dist_loader_js_ref_10_oneOf_1_0_node_modules_css_loader_index_js_ref_10_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_10_oneOf_1_2_node_modules_less_loader_dist_cjs_js_ref_10_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_CustomSlider_vue_vue_type_style_index_0_lang_less___WEBPACK_IMPORTED_MODULE_0___default","n"],"mappings":"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","file":"js/lazy-view-components-CustomSlider.fab57a43.js","sourcesContent":["var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"slider-element\",style:(_vm.cssProps)},[_c('div',{staticClass:\"labels\"},[_c('label',{attrs:{\"for\":_vm.name}},[_vm._v(_vm._s(_vm.label))]),(_vm.subText)?_c('span',[_c('input',{staticClass:\"value-display\",attrs:{\"type\":\"number\",\"id\":_vm.id + '-Input',\"min\":_vm.min,\"max\":_vm.maxValue},domProps:{\"value\":_vm.value},on:{\"input\":function($event){return _vm.$emit('input', $event.target.value)},\"blur\":function($event){return _vm.checkValueBoundaries()}}}),_vm._v(\"\\n      \"+_vm._s(_vm.subText)+\"\\n    \")]):_vm._e()]),_c('input',{ref:\"slider\",attrs:{\"type\":\"range\",\"min\":_vm.min,\"max\":_vm.maxValue,\"id\":_vm.id,\"name\":_vm.name,\"step\":_vm.step},domProps:{\"value\":_vm.value},on:{\"blur\":function($event){return _vm.$emit('blur')},\"input\":function($event){return _vm.$emit('input', $event.target.value)},\"focus\":function($event){return _vm.$emit('focus')}}}),_c('div',{staticClass:\"steps\"},_vm._l((_vm._steps),function(step,index){return _c('div',{key:index,staticClass:\"step-wrapper\",class:{ selected: _vm.value == step },on:{\"click\":function($event){return _vm.$emit('input', step)}}},[_vm._m(0,true),_c('div',{staticClass:\"step\"},[_c('span',[_vm._v(\"\\n          \"+_vm._s(step)+\"\\n        \")])])])}),0)])}\nvar staticRenderFns = [function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"dot-wrapper\"},[_c('div',{staticClass:\"dot\"})])}]\n\nexport { render, staticRenderFns }","<template>\n  <div class=\"slider-element\" :style=\"cssProps\">\n    <div class=\"labels\">\n      <label :for=\"name\">{{ label }}</label>\n      <span v-if=\"subText\">\n        <input\n          class=\"value-display\"\n          type=\"number\"\n          :id=\"id + '-Input'\"\n          :value=\"value\"\n          :min=\"min\"\n          :max=\"maxValue\"\n          @input=\"$emit('input', $event.target.value)\"\n          @blur=\"checkValueBoundaries()\"\n        />\n        {{ subText }}\n      </span>\n    </div>\n    <input\n      ref=\"slider\"\n      type=\"range\"\n      :min=\"min\"\n      :max=\"maxValue\"\n      :id=\"id\"\n      :value=\"value\"\n      :name=\"name\"\n      :step=\"step\"\n      @blur=\"$emit('blur')\"\n      @input=\"$emit('input', $event.target.value)\"\n      @focus=\"$emit('focus')\"\n    />\n\n    <div class=\"steps\">\n      <div\n        class=\"step-wrapper\"\n        v-for=\"(step, index) in _steps\"\n        :key=\"index\"\n        :class=\"{ selected: value == step }\"\n        @click=\"$emit('input', step)\"\n      >\n        <div class=\"dot-wrapper\">\n          <div class=\"dot\"></div>\n        </div>\n        <div class=\"step\">\n          <span>\n            {{ step }}\n          </span>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  props: {\n    value: {\n      type: [Number, String]\n    },\n    name: {\n      required: true,\n      type: String\n    },\n    id: {\n      required: true,\n      type: String\n    },\n    min: {\n      type: Number,\n      default: 0\n    },\n    step: {\n      type: Number,\n      default: 100\n    },\n    steps: {\n      type: Number,\n      default: 5\n    },\n    label: {\n      type: String\n    },\n    subText: {\n      type: String\n    },\n    activeColor: {\n      type: String,\n      default: \"var(--orange-web)\"\n    }\n  },\n  data() {\n    return {\n      sliderWidth: 0,\n      stepDistance: 0\n    };\n  },\n  methods: {\n    checkValueBoundaries() {\n      this.$emit(\"blur\");\n      if (this.value > this.maxValue) this.$emit(\"input\", this.maxValue);\n      else if (this.value < this.min) this.$emit(\"input\", this.min);\n    }\n  },\n  computed: {\n    _steps() {\n      const steps = [this.min];\n      for (let i = 0; i < this.steps; i++) {\n        const nextNumber = (i + 1) * this.step + this.min;\n        steps.push(nextNumber);\n      }\n      return steps;\n    },\n    maxValue() {\n      return this.steps * this.step + this.min;\n    },\n    boundaryChanges(){\n      return this.min + this.maxValue\n    },\n    cssProps(){\n      return {\"--active-color\" : this.activeColor}\n    }\n  },\n  watch: {\n    boundaryChanges: {\n      handler: function(){\n        this.checkValueBoundaries()\n      }\n    }\n  }\n};\n</script>\n\n<style lang=\"less\">\n:root {\n  --thumb-size: 12px;\n}\n\n.slider-element {\n  position: relative;\n  width: 100%;\n  margin-bottom: 24px; // Push down elements after (because step numbers are placed absolute)\n  input[type=\"range\"] {\n    -webkit-appearance: none;\n    appearance: none;\n    width: 100%;\n    height: 15px;\n    height: 2px;\n    border-radius: 20px;\n    background: #d3d3d3;\n    outline: none;\n    opacity: 0.7;\n    -webkit-transition: 0.2s;\n    transition: opacity 0.2s;\n    cursor: pointer;\n    &:hover,\n    &:focus {\n      opacity: 1;\n    }\n\n    &::-webkit-slider-thumb {\n      cursor: grab;\n      -webkit-appearance: none;\n      appearance: none;\n      width: var(--thumb-size);\n      height: var(--thumb-size);\n      margin-right: 4px;\n      border-radius: 50%;\n      background: var(--active-color);\n      cursor: pointer;\n    }\n\n    &::-moz-range-thumb {\n      width: var(--thumb-size);\n      height: var(--thumb-size);\n      background: var(--active-color);\n      border-radius: 50%;\n      cursor: pointer;\n    }\n  }\n\n  .steps {\n    user-select: none;\n    position: relative;\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    .step-wrapper {\n      position: relative;\n      background: var(--text-grey-primary);\n      font-size: 8px;\n      .step {\n        position: absolute;\n        display: flex;\n        width: var(--thumb-size);\n        left: 0;\n        justify-content: center;\n        color: var(--text-grey-primary);\n      }\n      &:last-child .step {\n        justify-content: flex-end;\n      }\n      &:nth-child(1) .step {\n        justify-content: flex-start;\n      }\n      .dot-wrapper {\n        cursor: pointer;\n        width: var(--thumb-size);\n        height: 0;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        .dot {\n          width: 4px;\n          border-radius: 20px;\n          height: 4px;\n          background-color: var(--text-grey-primary);\n          position: absolute;\n          top: -9px;\n        }\n      }\n      &.selected {\n        .dot {\n          background-color: var(--active-color);\n        }\n        .step {\n          color: #fff;\n        }\n      }\n    }\n  }\n  .labels {\n    display: flex;\n    justify-content: space-between;\n    font-size: 12px;\n    color: var(--text-grey-primary);\n\n    label {\n      font-weight: bold;\n    }\n  }\n\n  .value-display {\n    background: transparent;\n    background: var(--charcoal);\n    padding: 2px;\n    border: none;\n    color: inherit;\n  }\n\n  input::-webkit-outer-spin-button ,\n  input::-webkit-inner-spin-button  {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  input[type=\"number\"] {\n    -moz-appearance: textfield;\n  }\n\n}\n</style>\n","import mod from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./CustomSlider.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./CustomSlider.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./CustomSlider.vue?vue&type=template&id=76cbb4c3&\"\nimport script from \"./CustomSlider.vue?vue&type=script&lang=js&\"\nexport * from \"./CustomSlider.vue?vue&type=script&lang=js&\"\nimport style0 from \"./CustomSlider.vue?vue&type=style&index=0&lang=less&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\nexport default component.exports","import mod from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--10-oneOf-1-0!../../node_modules/css-loader/index.js??ref--10-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--10-oneOf-1-2!../../node_modules/less-loader/dist/cjs.js??ref--10-oneOf-1-3!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./CustomSlider.vue?vue&type=style&index=0&lang=less&\"; export default mod; export * from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--10-oneOf-1-0!../../node_modules/css-loader/index.js??ref--10-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--10-oneOf-1-2!../../node_modules/less-loader/dist/cjs.js??ref--10-oneOf-1-3!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./CustomSlider.vue?vue&type=style&index=0&lang=less&\""],"sourceRoot":""}