Slider / Range

Selects a value from a range

Alias: "Range"

<winui-slider> and <winui-range> can be used interchangeably.

Usage

<template>
  <winui-slider min="0" max="10" value="5" />
</template>

Props

Tip

The Slider component inherits all attributes and events from <input type="range"> (opens new window)

Customization

Use the class name .winui-slider to override/customize the component's styles.

To customize the thumb into a box, use the class name .has-box-indicator.

Examples

Handling two-way binding

Your age: 18. You are allowed to drink alcohol.

<template>
  <div>
    <winui-slider class="has-box-indicator" min="1" max="30" v-model="age" />
    <div>
      Your age: {{ age }}. You are
      <strong>{{ age > 17 ? "allowed" : "not allowed" }}</strong>
      to drink alcohol.
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      age: 18,
    };
  },
};
</script>