CODEWITHSUNDEEP
javascript
fasfrtewqt2354r2edrq
fasfrtewqt2354r2edrq

Reputation: 166

Why two different range inputs depending on each other incorrectly change the values?

I am trying to create two input range elements whose value depends on each other. One shows the minimum value and the other shows the maximum value. In addition to that, I have two items that display these values. The minimum value cannot be greater than the maximum value and vice versa, so the value of the second input also changes based on the value of the input being changed. The problem that I don't know how to solve is that when, for example, the minimum value is changed to higher than 99, the input of the maximum either locks up by itself or its value jumps over various other values. How can I prevent this error from happening?

index.html:

<head>
</head>
<body>
<div id="price-div"> </div>
<script>
const price_div = document.getElementById('price-div')

const min_price_range = document.createElement('input')
min_price_range.setAttribute('type','range')
min_price_range.setAttribute('min','1')
min_price_range.setAttribute('max','300')
min_price_range.setAttribute('value','20')

const div_display_min_price = document.createElement('div')
div_display_min_price.innerHTML = `Min price: ${min_price_range.value}$`

const max_price_range = document.createElement('input')
max_price_range.setAttribute('type','range')
max_price_range.setAttribute('min','1')
max_price_range.setAttribute('max','300')
max_price_range.setAttribute('value','50')

const div_display_max_price = document.createElement('div')
div_display_max_price.innerHTML = `Max price: ${max_price_range.value}$`

price_div.appendChild(min_price_range)
price_div.appendChild(div_display_min_price)
price_div.appendChild(max_price_range)
price_div.appendChild(div_display_max_price)

min_price_range.oninput = function(){
    div_display_min_price.innerHTML = `Min price: ${this.value}$`
    //This fragment should change the maximum value if the minimum value is greater than it
    if (this.value > max_price_range.value) {
        max_price_range.value = this.value
        div_display_max_price.innerHTML = `Max price: ${this.value}$`
    }
 }

 max_price_range.oninput = function(){
    div_display_max_price.innerHTML = `Max price: ${this.value}$`
    if (this.value < min_price_range.value) {
    //This fragment should change the minimum value if the maximum value is less than it
        min_price_range.value = this.value
        div_display_min_price.innerHTML = `Min price: ${this.value}$`
    }
 }
</script>
</body>

Upvotes: 0

Views: 36

Answers (1)

Phani
Phani

Reputation: 129

const price_div = document.getElementById('price-div')

const min_price_range = document.createElement('input')
min_price_range.setAttribute('type','range')
min_price_range.setAttribute('min','1')
min_price_range.setAttribute('max','300')
min_price_range.setAttribute('value','20')

const div_display_min_price = document.createElement('div')
div_display_min_price.innerHTML = `Min price: ${min_price_range.value}$`

const max_price_range = document.createElement('input')
max_price_range.setAttribute('type','range')
max_price_range.setAttribute('min','1')
max_price_range.setAttribute('max','300')
max_price_range.setAttribute('value','50')

const div_display_max_price = document.createElement('div')
div_display_max_price.innerHTML = `Max price: ${max_price_range.value}$`

price_div.appendChild(min_price_range)
price_div.appendChild(div_display_min_price)
price_div.appendChild(max_price_range)
price_div.appendChild(div_display_max_price)

min_price_range.oninput = function(){
    div_display_min_price.innerHTML = `Min price: ${this.value}$`
    //This fragment should change the maximum value if the minimum value is greater than it
    if (Number(this.value) > Number(max_price_range.value)) {
        max_price_range.value = this.value
        div_display_max_price.innerHTML = `Max price: ${this.value}$`
    }
 }

 max_price_range.oninput = function(){
    div_display_max_price.innerHTML = `Max price: ${this.value}$`
    if (Number(this.value) < Number(min_price_range.value)) {
    //This fragment should change the minimum value if the maximum value is less than it
        min_price_range.value = this.value
        div_display_min_price.innerHTML = `Min price: ${this.value}$`
    }
 }
<div id="price-div"> </div>

Please refer the code, In if condition here string comparison is happening. we need to typecast to Number datatype. Values we will get from DOM will be string by default.

Upvotes: 1

Related Questions