Just starting out with vue.js and wanted to create a slide-bar with min and max values.
I came across vue range slider, installed it, and successfully implemented it.
The issue I'm facing is changing the value on the slider. The values from my API request are in an array:
[400, 600, 800, 1000, 1200, 1400, 1600, 1800, 2000, 2500, 3000]I searched through the documentation for information on how to change this max value, but unfortunately found nothing :/ You can see what my slide bar currently looks like here .
I want to replace the values with those provided in the array.
HTML
.box_slider
VueSlideBar(v-model="value"
:min="0"
:max="sliderAmount" //this is my value
:processStyle="slider.processStyle"
:lineHeight="slider.lineHeight"
:tooltipStyles="{ backgroundColor: 'red', borderColor:
'red' }"
class="demo-demo" id="slider-1")
VUE.JS
<script>
import co from "@/util/co.js";
import VueSlideBar from "vue-slide-bar";
var sliderAmount;
export default {
name: "Repaid",
components: {
VueSlideBar
},
data() {
return {
slider: {
lineHeight: 10
},
sliderAmount: undefined
};
},
methods: {},
mounted() {
co.getLoanPriceList().then(data => {
let dataLoan = data.data;
console.log(dataLoan);
this.sliderAmount = dataLoan.amounts;
return this.sliderAmount;
});
},
computed: {
sliderAmountMap() {
const sliderAmountValue = this.sliderAmount;
return sliderAmountValue; //this is my value
console.log(sliderAmountValue);
}
}
};
</script>
If anyone has worked on a similar slider, any help in getting started would be greatly appreciated.
EDIT
Thank you all for your suggestions and time. The solution was to add slider.data to the VueSlideBar component, and create a variable data with an array in the data section.
HTML
.box_slider {{sliderAmountMap}}
VueSlideBar(v-model="value"
:min="0"
:data="slider.data"
:max="sliderAmount"
:processStyle="slider.processStyle"
:lineHeight="slider.lineHeight"
:tooltipStyles="{ backgroundColor: 'red', borderColor:
'red' }"
class="demo-demo" id="slider-1")
VUE.JS
export default {
name: "Repaid",
components: {
VueSlideBar
},
data() {
return {
slider: {
lineHeight: 10,
data: [400, 600, 800, 1000, 1200, 1400, 1600, 1800, 2000, 2500,
3000]
},
sliderAmount: undefined
};
},