Is it possible to add a defined range of value and user will react accordingly? about slider HOT 2 CLOSED

I would suggest using a simple range with step=1 and a format function to access your custom array.

<template>
    <Slider
      v-model="value"
      min="0"
      max="7"
      step="1"
      :format="format"
    />
  </template>

  <script>
    import Slider from '@vueform/slider'

    export default {
      components: { Slider },
      data: () => ({
        value: 0,
        format: (index) => ["500", "1k", "5k", "10k", "50k", "100k", "150k", "200k"][index]
      })
    }
  </script>

https://jsfiddle.net/mqwep05u/

Alright, thanks! Didn't know able to do in this way.

from slider.

I would suggest using a simple range with step=1 and a format function to access your custom array.

<template>
    <Slider
      v-model="value"
      min="0"
      max="7"
      step="1"
      :format="format"
    />
  </template>

  <script>
    import Slider from '@vueform/slider'

    export default {
      components: { Slider },
      data: () => ({
        value: 0,
        format: (index) => ["500", "1k", "5k", "10k", "50k", "100k", "150k", "200k"][index]
      })
    }
  </script>

https://jsfiddle.net/mqwep05u/

from slider.