Range in Vue js

Question

I am trying to implement a slider into my vue-code but it tends to return to its original position when moved, I would be pleased if you could help me to fix it.

What am I doing wrong?

<script lang="ts">
export default {
    props: [
        'type',
        'min',
        'max',
        'value',
        'step'
    ],
    data() {
        return {
            rangeVal: this.value
        }
    }
}
</script>

<template>
    <div>
        <div style="display: flex; justify-content: space-between">
            <label class="form-label">Выберите {{type}}</label>
            <output id="rangeSumValue" aria-hidden="true"
                    style="font-weight: bold; font-size: 20px">{{rangeVal}}</output>
        </div>
        <input type="range" class="form-range" :min=min :max=max :value=value :step=step v-model=rangeVal />
        <div style="display: flex; justify-content: space-between">
            <span>{{min}}</span>
            <span>{{max}}</span>
        </div>
    </div>
</template>

oleracea · Accepted Answer · 2025-09-22 21:53:10Z

Your slider jumps back to the old postition because you are mixing :value="value" with v-model="rangeVal" - like this they are conflicting. Try using just the v-model.

Try this:

<script lang="ts">
export default {
  props: {
    type: String,
    min: Number,
    max: Number,
    step: Number
  },
  data() {
    return {
      rangeVal: 0 // start value
    }
  }
}
</script>

<template>
  <div>
    <div style="display: flex; justify-content: space-between">
      <label class="form-label">Выберите {{ type }}</label>
      <output aria-hidden="true"
              style="font-weight: bold; font-size: 20px">
        {{ rangeVal }}
      </output>
    </div>
    <input type="range"
           class="form-range"
           :min="min"
           :max="max"
           :step="step"
           v-model="rangeVal" />
    <div style="display: flex; justify-content: space-between">
      <span>{{ min }}</span>
      <span>{{ max }}</span>
    </div>
  </div>
</template>

Collectives™ on Stack Overflow

Range in Vue js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related