html
<div class="modal fade" id="exampleModal1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div id="demo-simple-slider" class="dragdealer">
<div class="handle red-bar">
<p><input id="values" onchange="alert();" type="text"></p>
</div>
</div>
</div>
jquery
$( "#exampleModal1" ).on('shown', function(){
//Dragdealer
//Product condition
var main_width = $('#demo-simple-slider').outerWidth();
new Dragdealer('demo-simple-slider', {
animationCallback: function(x, y) {
dragged_handle();
$('#demo-simple-slider #values').val((x * 7).toFixed(1));
var x = $('#demo-simple-slider #values').val();
},
});
//Function to set Handle position
function dragged_handle(){
var left_off_container = $('#demo-simple-slider').offset().left;
var left_off = $('#demo-simple-slider .handle').offset().left;
var width_circle = ((left_off - left_off_container) + 10);
$('#demo-simple-slider .sado-div').width(width_circle);
}
});
The previous use of this plugin was successful. Reusing the same code as shown above, I encountered an issue where the handle does not move. Despite no errors in the console, I am unable to identify the root cause of the problem.