{"version":3,"sources":["webpack:///./src/views/extensions/slider/SliderLazy.vue?8280","webpack:///src/views/extensions/slider/SliderLazy.vue","webpack:///./src/views/extensions/slider/SliderLazy.vue?bfef","webpack:///./src/views/extensions/slider/SliderLazy.vue","webpack:///./node_modules/bootstrap-vue/esm/components/card/card-text.js","webpack:///./src/views/extensions/slider/code.js"],"names":["render","_vm","this","_h","$createElement","_c","_self","attrs","scopedSlots","_u","key","fn","_v","_s","codeLazy","proxy","value","direction","model","callback","$$v","expression","staticRenderFns","components","BCardText","VueSlider","BCardCode","data","dir","computed","store","state","appConfig","isRTL","component","props","textTag","extend","name","functional","h","_ref","children","staticClass","codeSingle","codeMultiple","codeRange","codeRTL","codeDisabled","codeAdsorb","codeContained","codebehavior","codeColors","codeInput","codeVerticalDefault","codeConntectLower","codeConnectUpper","codeTooltips","codeTopBottom","codeLimit"],"mappings":"uHAAA,IAAIA,EAAS,WAAa,IAAIC,EAAIC,KAASC,EAAGF,EAAIG,eAAmBC,EAAGJ,EAAIK,MAAMD,IAAIF,EAAG,OAAOE,EAAG,cAAc,CAACE,MAAM,CAAC,MAAQ,eAAeC,YAAYP,EAAIQ,GAAG,CAAC,CAACC,IAAI,OAAOC,GAAG,WAAW,MAAO,CAACV,EAAIW,GAAG,IAAIX,EAAIY,GAAGZ,EAAIa,UAAU,OAAOC,OAAM,MAAS,CAACV,EAAG,cAAc,CAACJ,EAAIW,GAAG,4DAA4DP,EAAG,cAAc,CAACJ,EAAIW,GAAG,UAAUX,EAAIY,GAAGZ,EAAIe,UAAUX,EAAG,aAAa,CAACE,MAAM,CAAC,MAAO,EAAK,UAAYN,EAAIgB,WAAWC,MAAM,CAACF,MAAOf,EAAS,MAAEkB,SAAS,SAAUC,GAAMnB,EAAIe,MAAMI,GAAKC,WAAW,YAAY,IAC7hBC,EAAkB,G,qEC0BP,GACfC,WAAA,CACAC,iBACAC,cACAC,kBAEAC,KAAA,WACA,OACAb,gBACAE,MAAA,EACAY,IAAA,QAGAC,SAAA,CACAZ,UAAA,WACA,OAAAa,OAAAC,MAAAC,UAAAC,OAEA,KAAAL,IAAA,MACA,KAAAA,MAGA,KAAAA,IAAA,MACA,KAAAA,QCjDkX,I,YCO9WM,EAAY,eACd,EACAlC,EACAsB,GACA,EACA,KACA,KACA,MAIa,aAAAY,E,2CClBf,kGAKWC,EAAQ,eAAsB,CACvCC,QAAS,eAAS,OAAkB,MACnC,QAGQZ,EAAyB,aAAIa,OAAO,CAC7CC,KAAM,OACNC,YAAY,EACZJ,MAAOA,EACPnC,OAAQ,SAAgBwC,EAAGC,GACzB,IAAIN,EAAQM,EAAKN,MACbR,EAAOc,EAAKd,KACZe,EAAWD,EAAKC,SACpB,OAAOF,EAAEL,EAAMC,QAAS,eAAUT,EAAM,CACtCgB,YAAa,cACXD,O,kCCpBR,kkBAAO,IAAME,EAAa,8rBAsCbC,EAAe,6oCA0DfC,EAAY,gxBA0CZC,EAAU,qTAyBVjC,EAAW,y2BA6CXkC,EAAe,glCAyDfC,EAAa,4wCAgEbC,EAAgB,2mCAuDhBC,EAAe,0oFA6HfC,EAAa,ilEAkGbC,EAAY,klDAgFZC,EAAsB,wnDAiFtBC,EAAoB,svDAgFpBC,EAAmB,svDAgFnBC,EAAe,8lCAwDfC,EAAgB,8vCA6DhBC,EAAY","file":"js/chunk-2cb94a7c.e93095ef.js","sourcesContent":["var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-card-code',{attrs:{\"title\":\"Lazy Slider\"},scopedSlots:_vm._u([{key:\"code\",fn:function(){return [_vm._v(\" \"+_vm._s(_vm.codeLazy)+\" \")]},proxy:true}])},[_c('b-card-text',[_vm._v(\" The value will only be updated when the drag is over \")]),_c('b-card-text',[_vm._v(\"value: \"+_vm._s(_vm.value))]),_c('vue-slider',{attrs:{\"lazy\":true,\"direction\":_vm.direction},model:{value:(_vm.value),callback:function ($$v) {_vm.value=$$v},expression:\"value\"}})],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <b-card-code title=\"Lazy Slider\">\n    <b-card-text>\n      The value will only be updated when the drag is over\n    </b-card-text>\n    <b-card-text>value: {{ value }}</b-card-text>\n\n    <!-- slider -->\n    <vue-slider\n      v-model=\"value\"\n      :lazy=\"true\"\n      :direction=\"direction\"\n    />\n\n    <template #code>\n      {{ codeLazy }}\n    </template>\n  </b-card-code>\n</template>\n\n<script>\nimport { BCardText } from 'bootstrap-vue'\nimport BCardCode from '@core/components/b-card-code/BCardCode.vue'\nimport VueSlider from 'vue-slider-component'\nimport store from '@/store/index'\nimport { codeLazy } from './code'\n\nexport default {\n  components: {\n    BCardText,\n    VueSlider,\n    BCardCode,\n  },\n  data() {\n    return {\n      codeLazy,\n      value: 0,\n      dir: 'ltr',\n    }\n  },\n  computed: {\n    direction() {\n      if (store.state.appConfig.isRTL) {\n        // eslint-disable-next-line vue/no-side-effects-in-computed-properties\n        this.dir = 'rtl'\n        return this.dir\n      }\n      // eslint-disable-next-line vue/no-side-effects-in-computed-properties\n      this.dir = 'ltr'\n      return this.dir\n    },\n  },\n}\n</script>\n","import mod from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./SliderLazy.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./SliderLazy.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./SliderLazy.vue?vue&type=template&id=ea058e96&\"\nimport script from \"./SliderLazy.vue?vue&type=script&lang=js&\"\nexport * from \"./SliderLazy.vue?vue&type=script&lang=js&\"\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 { Vue, mergeData } from '../../vue';\nimport { NAME_CARD_TEXT } from '../../constants/components';\nimport { PROP_TYPE_STRING } from '../../constants/props';\nimport { makeProp, makePropsConfigurable } from '../../utils/props'; // --- Props ---\n\nexport var props = makePropsConfigurable({\n  textTag: makeProp(PROP_TYPE_STRING, 'p')\n}, NAME_CARD_TEXT); // --- Main component ---\n// @vue/component\n\nexport var BCardText = /*#__PURE__*/Vue.extend({\n  name: NAME_CARD_TEXT,\n  functional: true,\n  props: props,\n  render: function render(h, _ref) {\n    var props = _ref.props,\n        data = _ref.data,\n        children = _ref.children;\n    return h(props.textTag, mergeData(data, {\n      staticClass: 'card-text'\n    }), children);\n  }\n});","export const codeSingle = `\n<template>\n  <vue-slider\n    v-model=\"value\"\n    :direction=\"direction\"\n  />\n</template>\n\n<script>\nimport VueSlider from 'vue-slider-component'\nimport store from '@/store/index'\n\nexport default {\n  components: {\n    VueSlider,\n  },\n  data() {\n    return {\n      value: 50,\n      dir: 'ltr',\n    }\n  },\n  computed: {\n    direction() {\n      if (store.state.appConfig.isRTL) {\n        // eslint-disable-next-line vue/no-side-effects-in-computed-properties\n        this.dir = 'rtl'\n        return this.dir\n      }\n      // eslint-disable-next-line vue/no-side-effects-in-computed-properties\n      this.dir = 'ltr'\n      return this.dir\n    },\n  },\n}\n</script>\n`\n\nexport const codeMultiple = `\n<template>\n  <div>\n    <b-card-text>\n      <span>Set multiple value to slider for multiple </span>\n      <code>dots</code>\n    </b-card-text>\n\n    <!-- sliders -->\n    <vue-slider\n      v-model=\"value_2\"\n      :direction=\"direction\"\n      class=\"mb-2\"\n    />\n    <vue-slider\n      v-model=\"value_3\"\n      :direction=\"direction\"\n      class=\"mb-2\"\n    />\n    <vue-slider\n      v-model=\"value_4\"\n      :direction=\"direction\"\n    />\n  </div> \n</template>\n\n<script>\nimport VueSlider from 'vue-slider-component'\nimport store from '@/store/index'\n\nexport default {\n  components: {\n    VueSlider,\n  },\n  data() {\n    return {\n      value_2: [0, 50],\n      value_3: [0, 50, 80],\n      value_4: [0, 50, 80, 100],\n      dir: 'ltr',\n    }\n  },\n  computed: {\n    direction() {\n      if (store.state.appConfig.isRTL) {\n        // eslint-disable-next-line vue/no-side-effects-in-computed-properties\n        this.dir = 'rtl'\n        return this.dir\n      }\n      // eslint-disable-next-line vue/no-side-effects-in-computed-properties\n      this.dir = 'ltr'\n      return this.dir\n    },\n  },\n}\n</script>\n`\n\nexport const codeRange = `\n<template>\n  <!-- slider -->\n  <vue-slider\n    v-model=\"value\"\n    :min=\"0\"\n    :max=\"1\"\n    :direction=\"direction\"\n    :interval=\"0.01\"\n  />\n</template>\n\n<script>\nimport VueSlider from 'vue-slider-component'\nimport store from '@/store/index'\n\nexport default {\n  components: {\n    VueSlider,\n  },\n  data() {\n    return {\n      value: 0.3,\n      dir: 'ltr',\n    }\n  },\n  computed: {\n    direction() {\n      if (store.state.appConfig.isRTL) {\n        // eslint-disable-next-line vue/no-side-effects-in-computed-properties\n        this.dir = 'rtl'\n        return this.dir\n      }\n      // eslint-disable-next-line vue/no-side-effects-in-computed-properties\n      this.dir = 'ltr'\n      return this.dir\n    },\n  },\n}\n</script>\n`\n\nexport const codeRTL = `\n<template>\n  <!-- slider -->\n  <vue-slider\n    v-model=\"value\"\n    direction=\"rtl\"\n  />\n</template>\n\n<script>\nimport VueSlider from 'vue-slider-component'\n\nexport default {\n  components: {\n    VueSlider,\n  },\n  data() {\n    return {\n      value: 50,\n    }\n  },\n}\n</script>\n`\n\nexport const codeLazy = `\n<template>\n  <div>\n    <b-card-text>value: {{ value }}</b-card-text>\n\n    <!-- slider -->\n    <vue-slider\n      v-model=\"value\"\n      :lazy=\"true\"\n      :direction=\"direction\"\n    />\n  </div>\n</template>\n\n<script>\nimport { BCardText } from 'bootstrap-vue'\nimport VueSlider from 'vue-slider-component'\nimport store from '@/store/index'\n\nexport default {\n  components: {\n    VueSlider,\n  },\n  data() {\n    return {\n      value: 0,\n      dir: 'ltr',\n    }\n  },\n  computed: {\n    direction() {\n      if (store.state.appConfig.isRTL) {\n        // eslint-disable-next-line vue/no-side-effects-in-computed-properties\n        this.dir = 'rtl'\n        return this.dir\n      }\n      // eslint-disable-next-line vue/no-side-effects-in-computed-properties\n      this.dir = 'ltr'\n      return this.dir\n    },\n  },\n}\n</script>\n`\n\nexport const codeDisabled = `\n<template>\n  <div>\n    <!--disabled slider -->\n    <vue-slider\n      v-model=\"value1\"\n      :disabled=\"true\"\n      class=\"mb-2\"\n      :direction=\"direction\"\n    />\n\n    <!-- disabled dot -->\n    <vue-slider\n      v-model=\"value2\"\n      :dot-options=\"dotOptions\"\n      :order=\"false\"\n      :direction=\"direction\"\n    />\n  </div>\n</template>\n\n<script>\nimport VueSlider from 'vue-slider-component'\nimport store from '@/store/index'\n\nexport default {\n  components: {\n    VueSlider,\n  },\n  data() {\n    return {\n      dir: 'ltr',\n      value1: 0,\n      value2: [0, 50],\n      dotOptions: [{\n        disabled: false,\n      }, {\n        disabled: true,\n      }],\n    }\n  },\n  computed: {\n    direction() {\n      if (store.state.appConfig.isRTL) {\n        // eslint-disable-next-line vue/no-side-effects-in-computed-properties\n        this.dir = 'rtl'\n        return this.dir\n      }\n      // eslint-disable-next-line vue/no-side-effects-in-computed-properties\n      this.dir = 'ltr'\n      return this.dir\n    },\n  },\n}\n</script>\n`\n\nexport const codeAdsorb = `\n<template>\n  <div>\n    <vue-slider\n      v-model=\"value1\"\n      :adsorb=\"true\"\n      :interval=\"10\"\n      :marks=\"true\"\n      class=\"mb-3\"\n      :direction=\"direction\"\n    />\n    <vue-slider\n      v-model=\"value2\"\n      :adsorb=\"true\"\n      :data=\"data\"\n      :marks=\"true\"\n      class=\"mb-3\"\n      :direction=\"direction\"\n    />\n    <vue-slider\n      v-model=\"value3\"\n      :adsorb=\"true\"\n      :marks=\"marks\"\n      :included=\"true\"\n      class=\"mb-2\"\n      :direction=\"direction\"\n    />\n  </div>\n</template>\n\n<script>\nimport VueSlider from 'vue-slider-component'\nimport store from '@/store/index'\n\nexport default {\n  components: {\n    VueSlider,\n  },\n  data() {\n    return {\n      value1: 20,\n      value2: 'c',\n      value3: 60,\n      data: ['a', 'b', 'c', 'd', 'e', 'f', 'g'],\n      marks: [0, 10, 30, 60, 100],\n      dir: 'ltr',\n    }\n  },\n  computed: {\n    direction() {\n      if (store.state.appConfig.isRTL) {\n        // eslint-disable-next-line vue/no-side-effects-in-computed-properties\n        this.dir = 'rtl'\n        return this.dir\n      }\n      // eslint-disable-next-line vue/no-side-effects-in-computed-properties\n      this.dir = 'ltr'\n      return this.dir\n    },\n  },\n}\n</script>\n`\n\nexport const codeContained = `\n<template>\n  <!-- contatined -->\n  <div class=\"wrap\">\n    <vue-slider :direction=\"direction\" />\n    <b-card-text>contained: false</b-card-text>\n    <vue-slider\n      :direction=\"direction\"\n      :contained=\"true\"\n    />\n    <b-card-text>contained: true</b-card-text>\n  </div>\n</template>\n\n<script>\nimport { BCardText } from 'bootstrap-vue'\nimport VueSlider from 'vue-slider-component'\nimport store from '@/store/index'\n\nexport default {\n  components: {\n    BCardText,\n    VueSlider,\n  },\n  data() {\n    return {\n      value: 50,\n      dir: 'ltr',\n    }\n  },\n  computed: {\n    direction() {\n      if (store.state.appConfig.isRTL) {\n        // eslint-disable-next-line vue/no-side-effects-in-computed-properties\n        this.dir = 'rtl'\n        return this.dir\n      }\n      // eslint-disable-next-line vue/no-side-effects-in-computed-properties\n      this.dir = 'ltr'\n      return this.dir\n    },\n  },\n}\n</script>\n\n<style lang=\"scss\" >\n// container style\n.wrap {\n  border-left: 1px dashed #ddd;\n  border-right: 1px dashed #ddd;\n  padding: 10px 0;\n}\n</style>\n`\n\nexport const codebehavior = `\n<template>\n  <div>\n\n    <!-- default slider -->\n    <h6>Default</h6>\n    <b-card-text>It is the default behavior of slider.</b-card-text>\n\n    <!-- slider -->\n    <vue-slider\n      v-model=\"value\"\n      :direction=\"direction\"\n    />\n\n    <!-- drang and click slider -->\n    <h6 class=\"mt-2\">\n      Drag on Click\n    </h6>\n    <b-card-text>\n      <span>When </span>\n      <code>drag-on-click</code>\n      <span> is set to </span>\n      <code>true</code>\n      <span>, can drag the slider directly when pressing the process.</span>\n    </b-card-text>\n\n    <!-- slider -->\n    <vue-slider\n      v-model=\"value1\"\n      :direction=\"direction\"\n      :drag-on-click=\"true\"\n    />\n\n    <!-- process not filled slider -->\n    <h6 class=\"mt-2\">\n      Process not filled\n    </h6>\n    <b-card-text>\n      <span>User </span>\n      <code>process</code>\n      <span> prop false for unfill the processbar.</span>\n    </b-card-text>\n\n    <!-- slider -->\n    <vue-slider\n      v-model=\"value2\"\n      :direction=\"direction\"\n      :process=\"false\"\n    />\n\n    <!-- min and max slider -->\n    <h6 class=\"mt-2\">\n      Min & Max\n    </h6>\n    <b-card-text>\n      <span>Use </span>\n      <code>min-range</code>\n      <span> and </span>\n      <code>max-range</code>\n      <span> prop to limit the slider.</span>\n    </b-card-text>\n\n    <!-- slider -->\n    <vue-slider\n      v-model=\"value3\"\n      :min-range=\"10\"\n      :direction=\"direction\"\n      :max-range=\"50\"\n    />\n\n    <!-- fixed slider  -->\n    <h6 class=\"mt-2\">\n      Fixed\n    </h6>\n    <b-card-text>\n      <span>Use </span>]\n      <code>fixed</code>\n      <span> prop to fixed the slider.</span>\n    </b-card-text>\n\n    <!-- slider -->\n    <vue-slider\n      v-model=\"value4\"\n      :direction=\"direction\"\n      :fixed=\"true\"\n    />\n  </div>\n</template>\n\n<script>\nimport { BCardText } from 'bootstrap-vue'\nimport VueSlider from 'vue-slider-component'\nimport store from '@/store/index'\n\nexport default {\n  components: {\n    VueSlider,\n    BCardText,\n  },\n  data() {\n    return {\n      value: 10,\n      value1: 30,\n      value2: 50,\n      value3: [10, 40],\n      value4: [10, 50],\n      dir: 'ltr',\n    }\n  },\n  computed: {\n    direction() {\n      if (store.state.appConfig.isRTL) {\n        // eslint-disable-next-line vue/no-side-effects-in-computed-properties\n        this.dir = 'rtl'\n        return this.dir\n      }\n      // eslint-disable-next-line vue/no-side-effects-in-computed-properties\n      this.dir = 'ltr'\n      return this.dir\n    },\n  },\n}\n</script>\n`\n\nexport const codeColors = `\n<template>\n  <div>\n    <!-- primary -->\n    <h6>Default / Primary Color Slider</h6>\n    <vue-slider\n      v-model=\"value\"\n      :tooltip=\"'none'\"\n      :direction=\"direction\"\n      class=\"mb-2\"\n    />\n\n    <!-- secondary -->\n    <h6>Secondary Color Slider</h6>\n    <vue-slider\n      v-model=\"value1\"\n      :tooltip=\"'none'\"\n      class=\"mb-2 vue-slider-secondary\"\n      :direction=\"direction\"\n    />\n\n    <!-- success -->\n    <h6>Success Color Slider</h6>\n    <vue-slider\n      v-model=\"value2\"\n      :tooltip=\"'none'\"\n      class=\"mb-2 vue-slider-success\"\n      :direction=\"direction\"\n    />\n\n    <!-- danger -->\n    <h6>Danger Color Slider</h6>\n    <vue-slider\n      v-model=\"value4\"\n      :tooltip=\"'none'\"\n      class=\"mb-2 vue-slider-danger\"\n      :direction=\"direction\"\n      :fixed=\"true\"\n    />\n\n    <!-- warning -->\n    <h6>Warning Color Slider</h6>\n    <vue-slider\n      v-model=\"value3\"\n      :tooltip=\"'none'\"\n      class=\"mb-2 vue-slider-warning\"\n      :direction=\"direction\"\n    />\n\n    <!-- info -->\n    <h6>Info Color Slider</h6>\n    <vue-slider\n      v-model=\"value5\"\n      :tooltip=\"'none'\"\n      :min-range=\"20\"\n      :max-range=\"50\"\n      class=\"mb-2 vue-slider-info\"\n      :direction=\"direction\"\n    />\n  </div>\n</template>\n\n<script>\nimport VueSlider from 'vue-slider-component'\nimport store from '@/store/index'\n\nexport default {\n  components: {\n    VueSlider,\n  },\n  data() {\n    return {\n      value: 50,\n      value1: [0, 50],\n      value2: [0, 30, 100],\n      value3: 45,\n      value4: [30, 60],\n      value5: [20, 40],\n      value6: [0, 20, 40, 60, 80, 100],\n      dir: 'ltr',\n    }\n  },\n  computed: {\n    direction() {\n      if (store.state.appConfig.isRTL) {\n        // eslint-disable-next-line vue/no-side-effects-in-computed-properties\n        this.dir = 'rtl'\n        return this.dir\n      }\n      // eslint-disable-next-line vue/no-side-effects-in-computed-properties\n      this.dir = 'ltr'\n      return this.dir\n    },\n  },\n}\n</script>\n`\n\nexport const codeInput = `\n<template>\n  <div>\n    <!-- input -->\n    <div class=\"d-flex\">\n      <b-form-group class=\"mr-2\">\n        <b-form-select\n          v-model=\"ldot\"\n        >\n          <b-form-select-option\n            v-for=\"n in 100\"\n            :key=\"n\"\n            :value=\"n\"\n          >\n            {{ n }}\n          </b-form-select-option>\n        </b-form-select>\n      </b-form-group>\n      <b-form-group>\n        <b-form-input\n          v-model=\"rdot\"\n        />\n      </b-form-group>\n    </div>\n\n    <!-- slider -->\n    <vue-slider\n      v-model=\"value\"\n      :direction=\"direction\"\n    />\n  </div>\n</template>\n\n<script>\nimport {\n  BFormSelect, BFormSelectOption, BFormGroup, BFormInput,\n} from 'bootstrap-vue'\nimport VueSlider from 'vue-slider-component'\nimport store from '@/store/index'\n\nexport default {\n  components: {\n    VueSlider,\n    BFormSelect,\n    BFormGroup,\n    BFormInput,\n    BFormSelectOption,\n  },\n  data() {\n    return {\n      ldot: 1,\n      rdot: 50,\n      dir: 'ltr',\n    }\n  },\n  computed: {\n    value: {\n      get() {\n        return [this.ldot, this.rdot]\n      },\n      set([ldot, rdot]) {\n        this.ldot = ldot\n        this.rdot = rdot\n      },\n    },\n    direction() {\n      if (store.state.appConfig.isRTL) {\n        // eslint-disable-next-line vue/no-side-effects-in-computed-properties\n        this.dir = 'rtl'\n        return this.dir\n      }\n      // eslint-disable-next-line vue/no-side-effects-in-computed-properties\n      this.dir = 'ltr'\n      return this.dir\n    },\n  },\n}\n</script>\n`\n\nexport const codeVerticalDefault = `\n<template>\n  <div class=\"d-flex justify-content-center\">\n    <vue-slider\n      v-model=\"value\"\n      direction=\"btt\"\n      :height=\"200\"\n      :process=\"false\"\n      class=\"mr-1\"\n      :tooltip=\"'none'\"\n      :dot-style=\"{backgroundColor:'#7267f0'}\"\n    />\n    <vue-slider\n      v-model=\"value1\"\n      direction=\"btt\"\n      :height=\"200\"\n      :process=\"false\"\n      class=\"mr-1\"\n      :tooltip=\"'none'\"\n      :dot-style=\"{backgroundColor:'#82868B'}\"\n    />\n    <vue-slider\n      v-model=\"value2\"\n      direction=\"btt\"\n      :height=\"200\"\n      :process=\"false\"\n      class=\"mr-1\"\n      :tooltip=\"'none'\"\n      :dot-style=\"{backgroundColor:'#28C76F'}\"\n    />\n    <vue-slider\n      v-model=\"value3\"\n      direction=\"btt\"\n      :height=\"200\"\n      :process=\"false\"\n      class=\"mr-1\"\n      :tooltip=\"'none'\"\n      :dot-style=\"{backgroundColor:'#FF9F43'}\"\n    />\n    <vue-slider\n      v-model=\"value4\"\n      direction=\"btt\"\n      :height=\"200\"\n      :process=\"false\"\n      class=\"mr-1\"\n      :tooltip=\"'none'\"\n      :dot-style=\"{backgroundColor:'#EA5455'}\"\n    />\n    <vue-slider\n      v-model=\"value5\"\n      direction=\"btt\"\n      :height=\"200\"\n      :process=\"false\"\n      class=\"mr-1\"\n      :tooltip=\"'none'\"\n      :dot-style=\"{backgroundColor:'#00CFE8'}\"\n    />\n  </div>\n</template>\n\n<script>\nimport VueSlider from 'vue-slider-component'\n\nexport default {\n  components: {\n    VueSlider,\n  },\n  data() {\n    return {\n      value: 60,\n      value1: 50,\n      value2: 40,\n      value3: 60,\n      value4: 70,\n      value5: 85,\n    }\n  },\n}\n</script>\n`\n\nexport const codeConntectLower = `\n<template>\n  <div class=\"d-flex justify-content-center\">\n    <vue-slider\n      v-model=\"value\"\n      direction=\"ttb\"\n      :height=\"200\"\n      class=\"mr-1\"\n      :tooltip=\"'none'\"\n      :dot-style=\"{backgroundColor:'#7267f0'}\"\n    />\n    <vue-slider\n      v-model=\"value1\"\n      direction=\"ttb\"\n      :height=\"200\"\n      class=\"mr-1\"\n      :tooltip=\"'none'\"\n      :dot-style=\"{backgroundColor:'#82868B'}\"\n      :process-style=\"{backgroundColor:'#82868B'}\"\n    />\n    <vue-slider\n      v-model=\"value2\"\n      direction=\"ttb\"\n      :height=\"200\"\n      class=\"mr-1\"\n      :tooltip=\"'none'\"\n      :dot-style=\"{backgroundColor:'#28C76F'}\"\n      :process-style=\"{backgroundColor:'#28C76F'}\"\n    />\n    <vue-slider\n      v-model=\"value3\"\n      direction=\"ttb\"\n      :height=\"200\"\n      class=\"mr-1\"\n      :tooltip=\"'none'\"\n      :dot-style=\"{backgroundColor:'#FF9F43'}\"\n      :process-style=\"{backgroundColor:'#FF9F43'}\"\n    />\n    <vue-slider\n      v-model=\"value4\"\n      direction=\"ttb\"\n      :height=\"200\"\n      class=\"mr-1\"\n      :tooltip=\"'none'\"\n      :dot-style=\"{backgroundColor:'#EA5455'}\"\n      :process-style=\"{backgroundColor:'#EA5455'}\"\n    />\n    <vue-slider\n      v-model=\"value5\"\n      direction=\"ttb\"\n      :height=\"200\"\n      class=\"mr-1\"\n      :tooltip=\"'none'\"\n      :dot-style=\"{backgroundColor:'#00CFE8'}\"\n      :process-style=\"{backgroundColor:'#00CFE8'}\"\n    />\n  </div>\n</template>\n\n<script>\nimport VueSlider from 'vue-slider-component'\n\nexport default {\n  components: {\n    VueSlider,\n  },\n  data() {\n    return {\n      value: 60,\n      value1: 50,\n      value2: 40,\n      value3: 60,\n      value4: 70,\n      value5: 85,\n    }\n  },\n}\n</script>\n`\n\nexport const codeConnectUpper = `\n<template>\n  <div class=\"d-flex justify-content-center\">\n    <vue-slider\n      v-model=\"value\"\n      direction=\"btt\"\n      :height=\"200\"\n      class=\"mr-1\"\n      :tooltip=\"'none'\"\n      :dot-style=\"{backgroundColor:'#7267f0'}\"\n    />\n    <vue-slider\n      v-model=\"value1\"\n      direction=\"btt\"\n      :height=\"200\"\n      class=\"mr-1\"\n      :tooltip=\"'none'\"\n      :dot-style=\"{backgroundColor:'#82868B'}\"\n      :process-style=\"{backgroundColor:'#82868B'}\"\n    />\n    <vue-slider\n      v-model=\"value2\"\n      direction=\"btt\"\n      :height=\"200\"\n      class=\"mr-1\"\n      :tooltip=\"'none'\"\n      :dot-style=\"{backgroundColor:'#28C76F'}\"\n      :process-style=\"{backgroundColor:'#28C76F'}\"\n    />\n    <vue-slider\n      v-model=\"value3\"\n      direction=\"btt\"\n      :height=\"200\"\n      class=\"mr-1\"\n      :tooltip=\"'none'\"\n      :dot-style=\"{backgroundColor:'#FF9F43'}\"\n      :process-style=\"{backgroundColor:'#FF9F43'}\"\n    />\n    <vue-slider\n      v-model=\"value4\"\n      direction=\"btt\"\n      :height=\"200\"\n      class=\"mr-1\"\n      :tooltip=\"'none'\"\n      :dot-style=\"{backgroundColor:'#EA5455'}\"\n      :process-style=\"{backgroundColor:'#EA5455'}\"\n    />\n    <vue-slider\n      v-model=\"value5\"\n      direction=\"btt\"\n      :height=\"200\"\n      class=\"mr-1\"\n      :tooltip=\"'none'\"\n      :dot-style=\"{backgroundColor:'#00CFE8'}\"\n      :process-style=\"{backgroundColor:'#00CFE8'}\"\n    />\n  </div>\n</template>\n\n<script>\nimport VueSlider from 'vue-slider-component'\n\nexport default {\n  components: {\n    VueSlider,\n  },\n  data() {\n    return {\n      value: 60,\n      value1: 50,\n      value2: 40,\n      value3: 60,\n      value4: 70,\n      value5: 85,\n    }\n  },\n}\n</script>\n`\n\nexport const codeTooltips = `\n<template>\n  <div class=\"d-flex justify-content-center\">\n    <vue-slider\n      v-model=\"value\"\n      direction=\"btt\"\n      :tooltip=\"'always'\"\n      :height=\"200\"\n      class=\"mr-4\"\n      :process=\"false\"\n      :dot-style=\"{backgroundColor:'#7267f0'}\"\n    />\n    <vue-slider\n      v-model=\"value5\"\n      direction=\"btt\"\n      :height=\"200\"\n      :process=\"false\"\n      :tooltip=\"'always'\"\n      class=\"mr-4\"\n      :dot-style=\"{backgroundColor:'#28C76F'}\"\n    />\n    <vue-slider\n      v-model=\"value3\"\n      direction=\"btt\"\n      :process=\"false\"\n      :tooltip=\"'always'\"\n      :height=\"200\"\n      class=\"mr-4\"\n      :dot-style=\"{backgroundColor:'#FF9F43'}\"\n    />\n  </div>\n</template>\n\n<script>\nimport BCardCode from '@core/components/b-card-code/BCardCode.vue'\nimport { BRow, BCol } from 'bootstrap-vue'\nimport VueSlider from 'vue-slider-component'\n\nexport default {\n  components: {\n    VueSlider,\n    BCardCode,\n    BRow,\n    BCol,\n  },\n  data() {\n    return {\n      value1: 50,\n      value3: 60,\n      value5: 85,\n    }\n  },\n}\n</script>\n`\n\nexport const codeTopBottom = `\n<template>\n  <div class=\"d-flex justify-content-center\">\n    <vue-slider\n      v-model=\"value\"\n      direction=\"btt\"\n      :height=\"200\"\n      class=\"mr-4\"\n      :adsorb=\"true\"\n      :tooltip=\"'none'\"\n      :interval=\"20\"\n      :marks=\"true\"\n      :dot-style=\"{backgroundColor:'#7267f0'}\"\n    />\n    <vue-slider\n      v-model=\"value6\"\n      direction=\"btt\"\n      :height=\"200\"\n      :adsorb=\"true\"\n      :data=\"data\"\n      :marks=\"true\"\n      class=\"mr-4\"\n      :tooltip=\"'none'\"\n      :dot-style=\"{backgroundColor:'#28C76F'}\"\n      :process-style=\"{backgroundColor:'#28C76F'}\"\n    />\n    <vue-slider\n      v-model=\"value3\"\n      direction=\"btt\"\n      :height=\"200\"\n      :adsorb=\"true\"\n      :included=\"true\"\n      :marks=\"marks\"\n      class=\"mr-4\"\n      :tooltip=\"'none'\"\n      :dot-style=\"{backgroundColor:'#FF9F43'}\"\n      :process-style=\"{backgroundColor:'#FF9F43'}\"\n    />\n  </div>\n</template>\n\n<script>\nimport VueSlider from 'vue-slider-component'\n\nexport default {\n  components: {\n    VueSlider,\n  },\n  data() {\n    return {\n      value: 60,\n      value3: 60,\n      value6: 'a',\n      data: ['a', 'b', 'c', 'd', 'e'],\n      marks: [0, 10, 30, 60, 100],\n    }\n  },\n}\n</script>\n`\n\nexport const codeLimit = `\n<template>\n  <div class=\"d-flex justify-content-center\">\n    <vue-slider\n      v-model=\"value7\"\n      direction=\"btt\"\n      :height=\"200\"\n      :min-range=\"20\"\n      :max-range=\"50\"\n      class=\"mr-1\"\n      :tooltip=\"'none'\"\n      :dot-style=\"{backgroundColor:'#7267f0'}\"\n    />\n    <vue-slider\n      v-model=\"value8\"\n      direction=\"btt\"\n      :height=\"200\"\n      class=\"mr-1\"\n      :tooltip=\"'none'\"\n      :fixed=\"true\"\n      :dot-style=\"{backgroundColor:'#82868B'}\"\n      :process-style=\"{backgroundColor:'#82868B'}\"\n    />\n    <vue-slider\n      v-model=\"value7\"\n      direction=\"btt\"\n      :height=\"200\"\n      :min-range=\"20\"\n      :max-range=\"50\"\n      class=\"mr-1\"\n      :tooltip=\"'none'\"\n      :dot-style=\"{backgroundColor:'#28C76F'}\"\n      :process-style=\"{backgroundColor:'#28C76F'}\"\n    />\n    <vue-slider\n      v-model=\"value8\"\n      direction=\"btt\"\n      :height=\"200\"\n      class=\"mr-1\"\n      :tooltip=\"'none'\"\n      :fixed=\"true\"\n      :dot-style=\"{backgroundColor:'#FF9F43'}\"\n      :process-style=\"{backgroundColor:'#FF9F43'}\"\n    />\n    <vue-slider\n      v-model=\"value7\"\n      direction=\"btt\"\n      :height=\"200\"\n      :min-range=\"20\"\n      :max-range=\"50\"\n      class=\"mr-1\"\n      :tooltip=\"'none'\"\n      :dot-style=\"{backgroundColor:'#EA5455'}\"\n      :process-style=\"{backgroundColor:'#EA5455'}\"\n    />\n    <vue-slider\n      v-model=\"value8\"\n      direction=\"btt\"\n      :height=\"200\"\n      class=\"mr-1\"\n      :tooltip=\"'none'\"\n      :fixed=\"true\"\n      :dot-style=\"{backgroundColor:'#00CFE8'}\"\n      :process-style=\"{backgroundColor:'#00CFE8'}\"\n    />\n  </div>\n</template>\n\n<script>\nimport VueSlider from 'vue-slider-component'\n\nexport default {\n  components: {\n    VueSlider,\n  },\n  data() {\n    return {\n      value7: [20, 50],\n      value8: [40, 80],\n    }\n  },\n}\n</script>\n`\n"],"sourceRoot":""}