# v-slider

<v-slider /> is a component that changes a numeric variable with a slider.

# Usage with global variable

To animate a global variable, you need to use v-model="v.x" where x is a variable name:

<v-slider v-model="v.x" />

> The value of x is {{ v.x }}

The value of x is 0

You can use v.x value to control the SVG element (or anything, really) on the page:

<svg width="400" height="40">
  <circle :cx="v.x" cy="20" r="10" />
</svg>

# Setting attributes

Since <v-slider /> is a lightweight wrapper around <input type="range"> so all the input element attributes, including min, max and step also work.

<v-slider v-model="v.x2" max="400" step="50" />

> The value of x2 is {{ v.x2 }}

The value of x2 is

Note that the step attribute allows to use of any value that allows to use a floating point number for those smoooth interactions.

<v-slider v-model="v.x3" max="400" step="any" />

> The value of x3 is {{ v.x3 }}

The value of x3 is

# Usage with local variable

To animate a local variable, you first define a variable x and use v-model to animate it:

<script setup>
import { ref } from 'vue'
const x = ref(0)
</script>

<v-slider v-model="x" />

> The value of x is {{ x }}

The value of x is 0

# Usage in custom components

<v-slider /> can also be used in Vue components, using v-model to animate reactive variable x:

<!-- /src/App.vue -->

<script setup>
  import { ref } from 'vue'
  import { VSlider } from 'visualia'
  const x = ref(0)
  // Use x.value to access the slider value
</script>

<template>
  <v-slider v-model="x" />
</template>

# Prior art

https://designstem.github.io/fachwerk/docs/#/f-slider
https://visualia.github.io/visualia_original/#live-variables_slider