# Slider / Range

Selects a value from a range

Alias: "Range"

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

# Usage

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

# Props


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

export default {
  data() {
    return {
      age: 18,