I am coding an experiment, and I need to have a disabled button activated only after clicking/dragging the bootstrap slider.
I have tried click, onmousedown, and value of the slider is different from 50 (the initial value set) functions, but they did not work. However, since it is my first time coding in JS and jQuery ever, I might have used them not 100% properly.
my code:
<br><br>
<!-- Format of the slider plus one stylesheet on the top of the page -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.7.2/css/bootstrap-slider.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.7.2/bootstrap-slider.min.js"></script>
<input id="slider" type="text" data-provide="slider" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="50" />
<br><br>
<!-- Button -->
<input class="MyButton" type="button" value="Next" title="Next Page" tabindex="200" onclick="window.location.href='example.html'" disabled="disabled">This community discussions have already helped me a dozen of times, I greatly appreciate your time! Let me know if the question is not clear enough.
Use the slideStop event:
$("#slider").on("slideStop", function() {
$(".MyButton").prop("disabled", null);
});