# Slider 滑块

<template>
  <div class="demo-slider">
    <plv-slider v-model="value"></plv-slider>
    <span class="number">{{ value }}</span>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: 0
      };
    }
  };
</script>

<template>
  <div class="demo-slider">
    <plv-slider v-model="value" :max="50" :min="10"></plv-slider>
    <span class="number">{{ value }}</span>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: 10
      };
    }
  };
</script>

<template>
  <div class="demo-slider">
    <plv-slider v-model="value" range></plv-slider>
    <span class="number">{{ value }}</span>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: [0, 100]
      };
    }
  };
</script>

<template>
  <div class="demo-slider">
    <plv-slider v-model="value" range disabled></plv-slider>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: [0, 100]
      };
    }
  };
</script>