{"version":3,"sources":["webpack:///./src/views/extensions/slider/code.js"],"names":["codeSingle","codeMultiple","codeRange","codeRTL","codeLazy","codeDisabled","codeAdsorb","codeContained","codebehavior","codeColors","codeInput","codeVerticalDefault","codeConntectLower","codeConnectUpper","codeTooltips","codeTopBottom","codeLimit"],"mappings":"gHAAA,8vBAAO,IAAMA,EAAa,8rBAsCbC,EAAe,6oCA0DfC,EAAY,gxBA0CZC,EAAU,qTAyBVC,EAAW,y2BA6CXC,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-2d2302de.0d93268f.js","sourcesContent":["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-1\">\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-1\">\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-1\">\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-1\">\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":""}