I am facing an issue with the vue-slider-component.
Below is the link to my current test module:
template:`
<div>
<vue-slider
v-model="value"
:order="false"
:tooltip="'always'"
:process="false"
:marks="marks"
:width="600"
ref="nodevalue">
<template #tooltip="{ index }">
<div v-if="index === 1">🐰</div>
<div v-else>🐢</div>
</template>
</vue-slider>
<get-node-index>
</get-node-index>
</div>
`,
data: function () {
return {
columnvalue: [
{text: 'cow', index: 0},
{text: 'dog', index: 50},
{text: 'cat', index: 80}
],
value: [0, 50, 80],
marks: {
'100': {
label: '🏁',
labelStyle: {
left: '100%',
margin: '0 0 0 10px',
top: '50%',
transform: 'translateY(-50%)'
}
}
}
}
}
new Vue({
el: '#app',
components: {
VueSlider: window['vue-slider-component']
},
data: function() {
return {
columnvalue: [{
text: 'cow',
index: 0
},
{
text: 'dog',
index: 50
},
{
text: 'cat',
index: 80
}
],
value: [0, 50, 80],
marks: {
'100': {
label: '🏁',
labelStyle: {
left: '100%',
margin: '0 0 0 10px',
top: '50%',
transform: 'translateY(-50%)'
}
}
}
}
}
})<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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="790f0c1c540a15101d1c0b541a16140916171c170d394a5749574d4a">[email protected]</a>/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 #tooltip="{ index }">
<div v-if="index === 1">🐰</div>
<div v-else>🐢</div>
</template>
</vue-slider>
</div>Is there a way to place nodes on the slider using my column values?