[Vuejs]-How to set the name of nodes by vue-slider-component

by

0👍

✅

The index value isn’t the value of the slider, it’s just the index of slider, so you’ll need to change your data to reflect that.

I don’t know what version of vue your are using, but if youre below 2.6 you’ll have to use slot and slot-scope, either way the main parts are these.

Changing your data to be correct

columnvalue: [{
      text: 'cow',
      index: 0
    },
    {
      text: 'dog',
      index: 1
    },
    {
      text: 'cat',
      index: 2
    }
  ]

Changing the html to call a function

<div>{{getText(index)}}</div>

And the actual function it’s self

getText(index) {
    return this.columnvalue.find((v) => v.index == index).text
}

new Vue({
  el: '#app',
  components: {
    VueSlider: window['vue-slider-component']
  },
  data: function() {
    return {
      columnvalue: [{
          text: 'cow',
          index: 0
        },
        {
          text: 'dog',
          index: 1
        },
        {
          text: 'cat',
          index: 2
        }
      ],
      value: [0, 50, 80],
      marks: {
        '100': {
          label: '🏁',
          labelStyle: {
            left: '100%',
            margin: '0 0 0 10px',
            top: '50%',
            transform: 'translateY(-50%)'
          }
        }
      }
    }
  },
  methods: {
    getText(index) {
      return this.columnvalue.find((v) => v.index == index).text
    }
  }
})
#app {
  margin: 80px
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vue-slider-component@latest/theme/default.css">
<script src="https://cdn.jsdelivr.net/npm/vue-slider-component@3.0.43/dist/vue-slider-component.umd.min.js"></script>

<div id="app">
  <vue-slider v-model="value" :order="false" :tooltip="'always'" :process="false" :marks="marks" :width="600" ref="nodevalue">
    <template slot="tooltip" slot-scope="{index}">
      <div>{{getText(index)}}</div>
    </template>
  </vue-slider>
</div>

Leave a comment