JSFiddle - React, Tailwind, and code Playground

HTML

<button id="b1">set value</button> It doesn't update.<br>
<button id="b2">set value & hide/show</button> It doesn't update.<br>
<button id="b3">set value & hide/show with 1ms delay</button>It does update, but the range has become untouchable.<br>
<input type="range" min="-10" max="10" value="0">

JavaScript

$('#b1').click(function() {
    $('input[type=range]').val(-2);
});

$('#b2').click(function() {
    $('input[type=range]').val(-2).hide().show();
});

$('#b3').click(function() {
    $('input[type=range]').val(-2).hide().show(1);
});