jQuery UI Slider Event Trigger on Value Change: How to Use the 'slide' Event
$(function() {\n\t$( "#slider-range" ).slider({\n\t\trange: true,\n\t\tmin: 0,\n\t\tmax: 2000,\n\t\tvalues: [ 0, 2000 ],\n\t\tslide: function( event, ui ) {\n\t\t$( "#amount" ).html( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );\n\t\t$( "#min" ).val(ui.values[ 0 ]);\n\t\t$( "#max" ).val(ui.values[ 1 ]);\n\t\t$(ui.handle).attr("data-value", ui.value); // Update handle popup value\n\t\t}\n\t});\n\t\n\t$( "#amount" ).html( "$" + $( "#slider-range" ).slider( "values", 0 ) +\n\t " - $" + $( "#slider-range" ).slider( "values", 1 ) );\n\t \n\t// Initialize handle popups with default values\n\t$("#slider-range .ui-slider-handle").each(function() {\n\t\t$(this).attr("data-value", $(this).slider("value"));\n\t});\n});\n\nThe event slide is triggered when the slider values change. In the code you provided, the slide event is already being used to update the values and display them in the #amount element.\n\nIf you want to perform additional actions when the slider values change, you can add your own code inside the slide event handler function. For example:\n\njavascript\n\$(function() {\n\t\$( \"#slider-range\" ).slider({\n\t\trange: true,\n\t\tmin: 0,\n\t\tmax: 2000,\n\t\tvalues: [ 0, 2000 ],\n\t\tslide: function( event, ui ) {\n\t\t\$( \"#amount\" ).html( \"$\" + ui.values[ 0 ] + \" - $\" + ui.values[ 1 ] );\n\t\t\$( \"#min\" ).val(ui.values[ 0 ]);\n\t\t\$( \"#max\" ).val(ui.values[ 1 ]);\n\t\t\$(ui.handle).attr(\"data-value\", ui.value); // Update handle popup value\n\t\t\n\t\t// Additional actions when slider values change\n\t\tconsole.log(\"Slider values changed!\");\n\t\t}\n\t});\n\t\n\t// Initialize handle popups with default values\n\t\$(\"#slider-range .ui-slider-handle\").each(function() {\n\t\t\$(this).attr(\"data-value\", \$(this).slider(\"value\"));\n\t});\n});\n\n\nIn the above code, the line console.log("Slider values changed!"); is added inside the slide event handler function. This line will log a message to the console whenever the slider values change. You can replace this line with your own code to perform the desired actions.
原文地址: https://www.cveoy.top/t/topic/qfie 著作权归作者所有。请勿转载和采集!