Vue-form-generator Update Range Slider Attribute

503 Views Asked by At

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

0

There are 0 best solutions below