Trying to tie a input range and input number field together

by John Cook   Last Updated March 07, 2019 07:08 AM

I'm trying to tie an input range and input number field together but not having much luck. I tried the answers here and modified it to suit

At the moment if I remove either field it still works as expected, but I'd love to have both there and working. eg. When you slide the range the number changes and when you change the number the slide changes. I'm using WordPress settings api.

<input class="inputRange" type="range" min="0" max="50" name="oosdwpro_settings[oosdwpro_text_field_1]" value="<?php echo $options["oosdwpro_text_field_1"]; ?>" />
<input type="number" min="0" max="50" id="field1" name="oosdwpro_settings[oosdwpro_text_field_1]" value="<?php echo $options["oosdwpro_text_field_1"]; ?>">


var range = document.querySelector('.inputRange');
var field = document.getElementById('field1');

range.addEventListener('input', function (e) {
 field.value =;
field.addEventListener('input', function (e) {
range.value =;

Related Questions

add_settings_error on validating plugin options API

Updated August 17, 2017 13:08 PM

Theme options are not saved using settings_fields

Updated August 19, 2017 06:08 AM