wt-slider.vue

Specs

Props

Name	Required	Types	Default	Description	Example	Deprecated
disabled		boolean	false	Disables the slider
vertical		boolean	false	Slider is positioned vertically, from bottom to top. Important: indicate slider height
min		number	0	The smallest slider value
max		number	100	The biggest slider value
step		number	1	Step of changing value
height		number	100	Vertical slider height, only number - quantity of pixels is accepted
width		number	undefined	Horizontal slider width

Example Slider

Code

<script setup>
import { ref } from 'vue';

const number = ref(70);
</script>

<template>
  <wt-slider
    v-model="number"
    :min="0"
    :max="100"
    :step="1"
  />
</template>

<style scoped lang="scss"></style>

Example Disabled Slider

Code

<script setup></script>

<template>
  <wt-slider
    :model-value="70"
    :min="0"
    :max="100"
    :step="1"
    disabled
  />
</template>

<style scoped lang="scss"></style>

Example Vertical Slider

Code

<script setup>
import { ref } from 'vue';

const number = ref(70);
</script>

<template>
  <wt-slider
    v-model="number"
    :min="0"
    :max="100"
    :step="1"
    :height="150"
    vertical
  />
</template>

<style scoped lang="scss"></style>