jQuery UI Slider Not Appearing

Question

I thought the basic syntax for a slider was:

<div id="slider"></div>

$("#slider").slider()

But that doesn't make a visible slider. Inspecting the div element, I see that some stylings were applied, but the slider isn't visible.

Here's a fiddle: http://jsfiddle.net/yqNcn/

Nice, jQuery UI demo copied, and its not working. I can only guess that jsfiddle messed up. — sg3s, Apr 10 '12 at 22:32

score 16 · Accepted Answer · answered Apr 10 '12 at 22:35

16

You have not included the CSS for jQuery UI so classes are applied but styles are not (there are actually none to apply). Here's an edited fiddle that includes the styles (look at the Resources panel); the slider is visible as it should be.

answered Apr 10 '12 at 22:35

Jon

428,835
81
738
806

2

That is strange, jsfiddle doesn't take care of that even though you checked the jQuery UI checkbox? Thats either a bug or not really thought out... jQuery UI is more than JS code. – sg3s Apr 11 '12 at 05:51
Great, Thank you! – Mohan Dec 09 '21 at 11:51

score 0 · Answer 2 · answered Feb 27 '14 at 17:34

First Import your javascript Files* jquery.s and import Jquery UI widget Jquery-ui.js Then Put Your Css Div Tag with id <div id="slider"></div> this Example

<div id="slider"></div>

then Call Jquery slider function....

<script>
$(function() {
$( "#slider" ).slider();
});
</script>

jQuery UI Slider Not Appearing

2 Answers2