Hi guys! I’m coming to you cause I honestly ran out of options in my brain.
I’m creating a form inspired by this webflow page:
In this page there are a few types of field styles, but in my form I will use just the slider range.
The HTML embed for my sliders are pretty simple, the step is set as 0.5, as the following printscreen shows:
For my slider range field I needed to add the + - buttons, to control the range.
I created them in the same way it is on the inspiration page: giving them classes “plus” and “minus”
In the inspiration page, these buttons change input form fields Type Number
And it uses jQuery code to change the input value in +1 or -1 accordingly to the button clicked
In my page, these buttons will be used to change my range slider - which the HTML code says is a type=“range”.
(I learned that type “range” returns a String, but I don’t know if this is useful information here)
The way the button interact with the range slider should be through .stepDown() or .stepUp()
I wrote the code of my page basically the same way it was built on the inspiration page, BUT: the buttons don’t work.
On my shared link (lines 80 - 90) you can see 2 different ways approached:
- The minus button code uses a specific range slider variable.stepDown(). The result: obviously everytime any minus button on the page is clicked only that specific range slider will decrease
- For the plus button I tried on line 87 to use the same method of the inspiration page. The result: it just doesn’t work at all.
I’ve been researching content about parent(), input, jQuery and foruns and everything but can’t understand why line 87 doesn’t work for me.
Could some blessed person help me? kkkkkk
Plus two other things (but these are less important):
a) Is it possible to declare disabled the whole class “.Displaymedida” (or all inputs of type ‘text’) instead of declaring one by one variable? (Before < /body> line 33-40)
I tried the ways bellow and they didn’t work (when I publish the form input field is still enabled):
Attempt 1: $(“.Displaymedida”).disabled = true
Attempt 2: $(“input:text”).disabled = true
b) How it is working now: when the page loads all the fields are 0 (as it should be, because I set the defaults .value = 0;)
but when you swipe one slide, the dialCount function makes all the others have their field number changed.
How I want: the dialCount function activate just for that specific slider, so the others stay 0 until the user swipe them