Form with range slider - control buttons not working

[Barceluciana (Luciana Barcelos)]

Hi guys! I’m coming to you cause I honestly ran out of options in my brain.

Links for my page:
Read only: [Webflow - Measuring page]
Live site: [https://measuring-page.webflow.io/]

I’m creating a form inspired by this webflow page:
[https://webflow.com/made-in-webflow/website/logic-sample-product-photo]
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:

1. 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
2. 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

[memetican (Michael Wells)]

On your increment, try changing to this;

test[0].stepUp();

stepUp is a DOM method, not a jQuery method, so the [0] is needed to resolve that to a DOM element.

Once that’s working, your step down code should follow the same pattern.

[memetican (Michael Wells)]

Also, yes, you can refactor all of your other initialization code using jQuery’s .each.
For example this init code;

            //defaults .value por ser campo de form
            fieldpescoco.value = 0;
            fieldombro.value = 0;
            fieldbraco.value = 0;
            fieldbiceps.value = 0;
            fieldcotovelo.value = 0;
            fieldpulso.value = 0;
            fieldpunho.value = 0;
            fieldseioaseio.value = 0;

            //desativando edicao na caixa de texto field do form
            fieldpescoco.disabled = true;
            fieldombro.disabled = true;
            fieldbraco.disabled = true;
            fieldbiceps.disabled = true;
            fieldcotovelo.disabled = true;
            fieldpulso.disabled = true;
            fieldpunho.disabled = true;
            fieldseioaseio.disabled = true;

Can be pulled into your .ready function;

$(document).ready(function() {
    $('input[type="text"]').each(function() {
        $(this).prop('disabled', true);
        $(this).val('0');
    });
});

[Stan (justAnotherDeveloper)]

hi @Barceluciana here is javascript example with half steps with multiple sliders*.

[Barceluciana (Luciana Barcelos)]

OMG YOU ARE A GENIUSSS! I’m amazed how fast and easily you solved this!
Thank you so much!
And also thank you for the .ready function
You just saved my Friday!

If I’m not asking too much (which I know I am )
But do you have some idea on how I could handle the request letter b?
When the page loads all the fields are 0 (as they should)

But clicking in only one range slider, all of them have their number changed because I activate the dialCount function, and the dialCount function include all sliders at once.

Is there some way to make the dialCount function activate just for the specific slider I clicked?
I was considering about using “if” or something like that, but don’t know if it is a clever way.

[Barceluciana (Luciana Barcelos)]

Thank you for your time and help!
But the other solution was easier to implement

[memetican (Michael Wells)]

Aww

For (b) the easiest way is to remove all of the variables and the dialCount function, and just act on the current item individually. Each of your range sliders and inputs is wrapped in a div with the class .slider-block so it’s already easy to reference.

I’d remove all of the code, vars etc and just have this as the script;

$(document).ready(function() {
  $('input[type="text"]').each(function() {
    $(this).prop('disabled', true);
    $(this).val('0');
  });
  $('input[type="range"]').each(function() {
    $(this)[0].addEventListener("input", function(event) {  
      input[0].value = Number(range[0].value).toFixed(1);
    }, false);
  });
  $(".minus").click(function () {
    var block = $(this).closest(".slider-block"); // get the wrapper
    var range = block.find("input[type=range]"); // get the range slider
    var input = block.find("input[type=text]"); // get the input
    range[0].stepDown(); 
    input[0].value = Number(range[0].value).toFixed(1);
    return false;
  });
  $(".plus").click(function () {
    var block = $(this).closest(".slider-block"); // get the wrapper
    var range = block.find("input[type=range]"); // get the range slider
    var input = block.find("input[type=text]"); // get the input
    range[0].stepUp();
    input[0].value = Number(range[0].value).toFixed(1);
    return false;
  });
});

[Stan (justAnotherDeveloper)]

Don’t worry. Sorry, I can’t provide simpler code as it is as simple as it can be (20 code lines).

[Barceluciana (Luciana Barcelos)]

@memetican

increment

Hey! It’s me again

Today I was going to glue this page to the rest of my project and before that I tried to run the solution you suggested.
In this script the buttons are working fine, but I found out that the range sliders are not anymore (when I slide them, it doesn’t show at the text input)
I think this is happening because at this part of the code the variables input and range are not declared:

$('input[type="range"]').each(function() {
    $(this)[0].addEventListener("input", function(event) {  
      input[0].value = Number(range[0].value).toFixed(1);
    }, false);
  });

Then I had some attempts to declare them but apparently I’m trying it the wrong way =/
Could you help me how to do it the right way?

Thanks in advance!