javascript - output HTML input range in range value

Question

I'm using rangeslider.js on a page and want to display the value in a hidden form field to be submitted. The hidden field can only accept a value in a range format, such as 50-205, where 50 is the minimum of the range and 205 is the dynamic number that is selected from moving the slider around.

Currently, it seems that the value is being subtracted from the 50- I have in the code. What do I need to do to make it so that the value is 50-xxx where xxx is the dynamic value?

<input type="range" value="" min="50" max="800" aria-required="true" aria-invalid="false" data-rangeslider name='input_5' id='input_1_5' oninput="document.getElementById('testfield').value = 50-this.value)">

<input type="hidden" id="testfield" name="testfield" value="" />

Answer 1

You just need some quotation marks, by the looks of it.

Using template strings:

oninput="document.getElementById('testfield').value = `50-${this.value}`"

Using .toString()

oninput="document.getElementById('testfield').value = '50-'+(this.value.toString())"

As pointed out by @Andreas, HTMLInputElement#value will always return a String, so you actually don't need the .toString() call here. If you want to use a Number data type at any point in the future, though, you would need to dive into JavaScript type coercion.

oninput="document.getElementById('testfield').value = '50-'+this.value"