0
345
VisualizaçõesJQuery UI slider, only the Button loads and not the Range and the slider does not slide
I am using the jquery slider, the issue that I face is only the slider button is displayed and not the range. When I try to slide the button, then it does not slide.
HTML
<div id="slider-range"></div>
JS
$("#slider-range").slider({
range: true,
min: 0,
max: 500,
values: [75, 300],
slide: function (event, ui) {
console.log("sliding");
}
});
After this is how the UI comes up
Notes:
- I confirmed the div gets loaded before the execution of JS and there is no exception in the console.
- To confirm the load of JQuery UI JS and CSS, I rendered a different control(Calendar Control) in the same Div, and it loaded and worked properly.
- I implemented the slider call back to confirm that the control works from JQueryUI, and the slider call back works properly. I am able to see the Console log that I have put in the callback.
- I confirmed through the Elements tab in Console that the Div has been appended with JQueryUI classes
- I observed that there is a href attribute added to the slider button, this points to localhost.
- I have also, confirmed that through the console I can see the jquery-UI styles being applied on the slider button
It would be very helpful if someone can help me through this.
·
Juan Pablo Isaza
1 Respostas
Responde à pergunta0
Use this:
https://jsfiddle.net/6sxg9ytd/1/
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Slider - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#slider" ).slider(
{
range: true,
min: 0,
max: 500,
values: [ 55, 105 ],
slide: function( event, ui ) {
console.log("sliding");
}
});
} );
</script>
</head>
<body>
<div id="slider"></div>
</body>
</html>
·
Juan Pablo Isaza
Relatório
Responde à pergunta