JSFiddle - React, Tailwind, and code Playground

HTML

<form>
    <label for="slider-1">Slider:</label>
    <input type="range" name="slider-1" id="slider-1" min="0" max="5000000" value="10" step="10" />
</form>

JavaScript

$(document).on('focus', '#slider-1', function () {
    $(this).attr('step', '1');
});

$(document).on('click', '.ui-slider-handle', function () {
    $('#slider-1').attr('step', '10');
});