I am currently setting up a multi-step form where the input from one slider needs to effect the max of another. I can manually update the max using this.tabSchema.(tab-id).fields[0].rangeSliderOptions.max, but this doesn't change the UX at all. I can see in the console that max has been correctly updated, but the UX shows the old max.
Digging into the ion.RangeSlider documentation, I see that it has .update, .destroy, and .reset methods. However, these seem to require a function particular to jquery, .data(), in order to properly setup the slider object that you then call .update() upon. I do not see any documentation around this for use in Vue. Is there a known way to do this? If not, does anyone know a way around it?
ETA: With code requested. Here is the relevant bit of tabSchema. There are many more tabs in the tabSchema, but these are the relevant two:
tabSchema: {
"num1" : {
fields: [{
type: "rangeSlider",
rangeSliderOptions: {
type: "single",
grid: false,
min: 0,
max: 2000000,
step: 5000,
// from: 100000,
prettify_enabled: true,
prettify_separator: ",",
prefix: "$",
hide_min_max: false,
},
id: "num1In",
model: "num1Val",
required:true,
styleClasses:'col-xs-12 col-sm-10 slider-bar'
}]
},
"num2" : {
fields: [{
type: "rangeSlider",
rangeSliderOptions: {
type: "single",
grid: false,
min: 0,
// max: ,
step: 5,
// from: 0,
prettify_enabled: true,
prefix: "$",
hide_min_max: false,
},
id: "num2In",
model: "num2Val",
required:true,
styleClasses:'col-xs-12 col-sm-10 slider-bar'
}]
}
}
And here is the bit of code that validates each tab:
validateTab: function(num){
var $valid = false; // assume not valid until checks are passed
this.error = '';
//////////// other validation //////////
else if (num == "num1"){
$valid = (this.model.num1Val != "");
if(!$valid){
this.error = 'Please provide a valid purchase price';
} else {
this.tabSchema.num2.fields[0].rangeSliderOptions.max = this.model.num1Val;
}
}
}
Documentation for ion.RangeSlider (public methods at the bottom): https://github.com/IonDen/ion.rangeSlider
Documentation for Vue-form-generator rangeslider: https://icebob.gitbooks.io/vueformgenerator/content/fields/slider.html