Vueform Slider

HTML

<script src="https://unpkg.com/vue@3"></script>
<script src="https://unpkg.com/@vueform/slider"></script>
<link rel="stylesheet" href="https://unpkg.com/@vueform/slider/themes/default.css">
<div id="app">

  <div class="example">
    <h3 id="example-1">#1 - Single slider</h3>
    <div class="output">Data: {{ example1.value }}</div>
    <Slider
      v-model="example1.value"
      v-bind="example1"
    ></Slider>
<pre v-pre>
  &lt;template>
    &lt;Slider
      v-model="value"
    />
  &lt;/template>

  &lt;script>
    import Slider from '@vueform/slider'

    export default {
      components: { Slider },
      data: () => ({
        value: 20
      })
    }
  &lt;/script>
</pre>
  </div>
  
  <div class="example">
    <h3 id="example-2">#2 - Multiple slider</h3>
    <div class="output">Data: {{ example2.value }}</div>
    <Slider
      v-model="example2.value"
      v-bind="example2"
    ></Slider>
<pre v-pre>
  &lt;template>
    &lt;Slider
      v-model="value"
    />
  &lt;/template>

  &lt;script>
    import Slider from '@vueform/slider'

    export default {
      components: { Slider },
      data: () => ({
        value: [20, 40]
      })
    }
  &lt;/script>
</pre>
  </div>
  
  <div class="example">
    <h3 id="example-3">#3 - Tooltip formatting</h3>
    <div class="output">Data: {{ example3.value }}</div>
    <Slider
      v-model="example3.value"
      v-bind="example3"
    ></Slider>
<pre v-pre>
  &lt;template>
    &lt;Slider
      v-model="value"
      :format="format"
    />
  &lt;/template>

  &lt;script>
    import Slider from '@vueform/slider'

    export default {
      components: { Slider },
      data: () => ({
        value: 20,
        format: function (value) {
          return `€${value}`
        }
      })
    }
  &lt;/script>
</pre>
  </div>
  
  <div class="example">
    <h3 id="example-4">#4 - Tooltip merging</h3>
    <div class="output">Data: {{ example4.value }}</div>
    <Slider
      v-model="example4.value"
     ...

CSS

body {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  background: #f1f1f1;
}

h3 {
  margin-top: 0;
}

.example {
  background: #ffffff;
  margin: 20px;
  border-color: #e7e7e7;
  padding: 40px;
}

.example pre {
  background: #f9f9f9;
  padding: 18px 6px;
  overflow-x: scroll;
  margin-top: 10px;
}

.output {
  font-family: Courier, Courier New, Lucida Console, Monaco, Consolas;
  background: #000000;
  color: #ffffff;
  padding: 20px;
  margin-bottom: 50px;
  display: inline-block;
  width: 100%;
  box-sizing: border-box;
  font-size: 13px;
}

.slider-vertical {
  margin: -30px auto 0;
}

JavaScript

const app = Vue.createApp({
  data: () => ({
    example1: {
      value: 20
    },
    example2: {
      value: [20, 40]
    },
    example3: {
      value: 20,
      format: function (value) {
        return `€${Math.round(value)}`
      }
    },
    example4: {
      value: [20, 30, 40],
      merge: 10,
      format: {
        prefix: '$',
        decimals: 2
      }
    },
    example5: {
      value: 50,
      orientation: 'vertical',
      direction: 'rtl'
    },
  })
})

app.component('Slider', VueformSlider)
app.mount('#app')