Hello, I have input type='range' .
With js, I give him the values max , min , value . So, I want the default value to be maximum, but even with value = (maximum value) the input is at its minimum value.
I can not understand why. Here is the code that I have in the project.

 const randomValue = (min, max) => { let rand = min - 0.5 + Math.random() * (max - min + 1) rand = Math.round(rand); return rand; }; const setPrice = () => { let slider = document.getElementById('price'); let minPriceField = document.getElementById('price-range-min-field'); let maxPriceField = document.getElementById('price-range-max-field'); let minPriceValue = randomValue(5000, 15000); let maxPriceValue = randomValue(25000, 50000); minPriceField.textContent = minPriceValue; maxPriceField.textContent = maxPriceValue; slider.setAttribute('min', minPriceValue); slider.setAttribute('max', maxPriceValue); slider.setAttribute('value', maxPriceValue); } setPrice(); 
 <fieldset className='products-filter-group'> <label htmlFor='price-range'>Максимальная цена</label><br/> <span className='price-range-min' id='price-range-min-field'>1000</span> <input type='range' id='price' name='price-range' /> <span className='price-range-max' id='price-range-max-field'>5000</span> </fieldset>

In the demo, everything works as it should, the input takes the maximum value after setAttribute triggered.
But in my react project, for some reason, the setting of the value attribute doesn’t have a reaction slider.setAttribute('value', maxPriceValue) .
Does anyone have any ideas about this? Maybe I make a mistake somewhere?

UPD

Only it dawned on me that you can change the value via slider.value = value , but why doesn’t you want to change through the value attribute, please explain?) Although it changes again in the demo ... it's not clear

Closed

  • You may not know why the method does not work until you show the source code. - Roman C
  • @RomanC so the fact of the matter is that I copied the code from my project ... The only difference is that in the project I call the setPrice() function in the component that draws the block with this input. In componentDidMount() - nazarukroman
  • I understand that you need to watch the project itself, but some strange things .. - nazarukroman

1 answer 1

document.querySelector('#price').addEventListener('input', setPrice)

It is necessary to run this way, but honestly, I can not even imagine what you were trying to implement

 const randomValue = (min, max) => { let rand = min - 0.5 + Math.random() * (max - min + 1) rand = Math.round(rand); return rand; }; const setPrice = () => { let slider = document.getElementById('price'); let minPriceField = document.getElementById('price-range-min-field'); let maxPriceField = document.getElementById('price-range-max-field'); let minPriceValue = randomValue(5000, 15000); let maxPriceValue = randomValue(25000, 50000); minPriceField.textContent = minPriceValue; maxPriceField.textContent = maxPriceValue; slider.setAttribute('min', minPriceValue); slider.setAttribute('max', maxPriceValue); slider.setAttribute('value', maxPriceValue); } document.querySelector('#price').addEventListener('input', setPrice); 
 <fieldset className='products-filter-group'> <label htmlFor='price-range'>Максимальная цена</label><br/> <span className='price-range-min' id='price-range-min-field'>1000</span> <input type='range' id='price' name='price-range' /> <span className='price-range-max' id='price-range-max-field'>5000</span> </fieldset>

  • After I receive the goods data by API, I need to specify the minimum and maximum price in the form. Also so that the input range value is equal to the maximum price. All this should happen immediately after the form was rendered on the page, and not by changing the input - nazarukroman
  • You run one and the same function twice ... I hardly understand what you wanted to depict ... And the random selection of the price range is what? - Air
  • I wrote what I wanted to portray. The random price range is here for example; in the project, the function of finding the maximum and minimum prices is in place of these two functions. - nazarukroman