June 27, 2021 at 4:32 am #52052
I am trying to display a value near a price field that is different from the actual value of the input. For example:
> I have a range slider that goes from $0 to $125 with steps of $25. This means there are 6 options on the slider.
> I want to dynamically display numbers 1 through 6 near the slider.
To further illustrate:
> If I slide to 5, the price amount that displays elsewhere, should then equal $100. Slider is set to 0 by default, which equals to price amount $0.
I have tried to achieve this with a function in the “Help Text” field:
This formula works as expected, BUT it gets buggy when I have more price fields. For example, I add another section with a price checkbox field. The first time I toggle the checkbox, the “Help Text” value from the slider changes (the actual slider value does not, though).
I think what I am trying to achieve is a basic functionality, but I can’t quite figure it out.
Is there a better (correct) way to go about this? Or is there a way to fix the bug I described?
I haven’t been able to find any info in the database, nor any demos that do what I want to do.
Many thanks to anyone with suggestions!
June 27, 2021 at 7:16 am #52055
Well I guess that’s what Data Grids are for haha… Ignore the question above, but to continue on the topic:
I am now trying to get the labels instead of values to display near my range slider.
Unfortunately pulling #data_grid_row_label into my “Help Text” does not display the label dynamically – it displays “#data_grid_row_label” as a static value.
Is there a way to achieve this? Thanks for any help!
June 28, 2021 at 11:41 am #52214
Summary for future users:
> I’ve got a price range slider;
> I have linked a data-grid with (price) values that match the steps of the slider input, and label names, to the slider input;
> Near the slider (all coded in an HTML field) I dynamically display the labels (data-label attributes in the <datalist> element) instead of the price values;
> I did this using jQuery, by filtering the data-labels and returning them as innerHTML when the corresponding option of the data-label equals the input of the range slider.
- You must be logged in to reply to this topic.