CODEWITHSUNDEEP
javascripthtml
Martin Scola
Martin Scola

Reputation: 35

Validate range inputs are not overlapping

I'm trying to validate that two range inputs who filter age do not go over one another. I can't find a way to have it done properly without the sliders behaving erratically, jumping from 0 to 50, and things like that.

I've tried different approaches (pure JS) with similar results:

if(input1.value >= input2.value || input2.value <= input1.value){
    input1.value = toString(input2.value - 1);
    input2.value = toString(input1.value + 1);
}

This one makes the sliders jump back to 50. I can't remember what else I've tried, but all do sort of the same thing. Either jump back to 50, or the minimumRange jump from 2 or 3 to 100.

I'd rather not use jQuery if at all possible

Here's the fiddle with the whole thing:

JSfiddle Validation and filters

Thank you!

Upvotes: 0

Views: 203

Answers (2)

Martin Scola
Martin Scola

Reputation: 35

This is how the function looks like now:

function filtroEdad(input1, input2) {
var edadMin = Number(input1.value);
var edadMax = Number(input2.value);

if(edadMin >= edadMax){
    input1.value = (edadMax - 1).toString();
}

if(edadMax <= edadMin){
    input2.value = (edadMin + 1).toString();
}

Thank you, @RaphaMex !!

Upvotes: 1

RaphaMex
RaphaMex

Reputation: 2839

Can't reproduce your issue in your fiddle, but I already see 2 issues in your code:

  • if input1.value is "50", then input1.value + 1 will be "501"
  • toString() should be called on numbers: 50.toString()

So your code should look like:

var minEdad = Number(input1.value),
    maxEdad = Number(input2.value);
if(minEdad >= maxEdad) {
    // Decide here what to do, for example
    input1.value = (maxEdad - 1).toString();
}

Upvotes: 0

Related Questions