ho pensato che la sintassi di base per un cursore era:jQuery UI Slider non compare
<div id="slider"></div>
$("#slider").slider()
Ma questo non rende visibile un cursore. Ispezionando l'elemento div, vedo che alcuni stili sono stati applicati, ma il cursore non è visibile.
Ecco un violino: http://jsfiddle.net/yqNcn/
Non hai incluso il CSS per jQuery UI così le classi vengono applicate, ma stili non sono (ci sono in realtà nessuno da applicare). Here's un violino modificato che include gli stili (guarda il pannello Risorse); il cursore è visibile come dovrebbe essere.
Questo è strano, jsfiddle non si occupa di questo anche se hai controllato la casella di controllo dell'interfaccia utente jQuery? Questo è un bug o non molto pensato ... L'interfaccia utente di jQuery è più del codice JS. – sg3s
prima importazione Javascript file * jquery.s e l'importazione widget di jQuery UI Jquery-ui.js Poi Put Your Css Div Tag con id<div id="slider"></div> questo esempio
<div id="slider"></div>
quindi chiamare la funzione di scorrimento Jquery ....
<script>
$(function() {
$("#slider").slider();
});
</script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
$(function() {
$("#slider-range").slider({
range: true,
min: 1000,
max: 1000000,
values: [ 75000, 300000 ],
slide: function(event, ui) {
$("#amount").val("$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ]);
}
});
$("#amount").val("$" + $("#slider-range").slider("values", 0) +
" - $" + $("#slider-range").slider("values", 1));
});
</script>
</head>
<body>
<p>
<label for="amount">Price range:</label>
<input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p>
<div id="slider-range"></div>
Nice, demo dell'interfaccia utente jQuery copiata, e non funziona. Posso solo immaginare che jsfiddle sia incasinato. – sg3s