JSFiddle - React, Tailwind, and code Playground

HTML

<div data-role="fieldcontain">
                <fieldset data-role="controlgroup" data-type="horizontal">
                    <legend>Layout view:</legend>
                          <input type="radio" name="radio-choice" id="radio-choice-c" value="on"  />
                          <label for="radio-choice-c">List</label>
                          <input type="radio" name="radio-choice" id="radio-choice-d" value="off" checked="checked" />
                          <label for="radio-choice-d">Grid</label>
                          <input type="radio" name="radio-choice" id="radio-choice-e" value="other" />
                          <label for="radio-choice-e">Gallery</label>
                            </fieldset>
           </div>

<div data-role="fieldcontain">
        <label for="slider">Room:</label>
        <input type="range" name="slider" id="slider" value="" min="" max="" data-highlight="true"  />
</div>

JavaScript

var A_Route = ['1', '2', '3', '50'];
var counter = 0;
$("input[name='radio-choice']").change(function() {
    if ($(this).val() == "on") {
        $('#slider').attr('min', A_Route[0]);
        $('#slider').attr('max', A_Route[3]);

    }
});