Lahori-Jawan/veeno

How to set value?

Closed this issue · 2 comments

Kasonz commented

Hello there,

is there an example shows how to set the value manually from method?

Best regards,
Kason

Lahori-Jawan commented

Hello @Kasonz,

Yes you can use set prop to manually set value for the slider. Here is a working example:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Veeno | Slider</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/11.1.0/nouislider.css">
  <style>
    .padd {
      padding: 3.5rem .5rem;
    }
  </style>
</head>
<body>
  <div id="app" style="max-width: 70%; margin: 0 auto; padding-top: 3rem;">
    <div class="padd">
      <button @click="UIState--">Decrement</button>
      <label style="font-size: 2rem;">
        {{ UIState }}
      </label>
      <button @click="UIState++">Increment</button>
    </div>
    <div class="padd">
      <veeno :handles="[UIState, 200]" 
      tooltips 
      :set="UIState"
      :range = "{ 'min': 100, 'max': 350 }"
      connect
      :pipsy = "{mode: 'range', density: 5}"
      ></veeno>
    </div>
  </div>


  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/11.1.0/nouislider.js"></script>
  <script src="https://unpkg.com/veeno@0.0.4/dist/v-slider.min.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {
        UIState: 150
      }
    })
  </script>
</body>
</html>
Kasonz commented

Many thanks!