How is the jQuery slider implemented?

Question

Does anybody know how the jQuery slider is implemented? Does it use the JavaScript canvas library to draw the two guiding lines or something else?

Thanks!

Answer 1

jQuery slider uses HTML elements to build the slider. It doesn't use the canvas library.

This is how the slider is built:

<div id="slider" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">
    <div class="ui-slider-range ui-widget-header" style="left: 17%; width: 50%;"/>
    <a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 17%;"/>
    <a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 67%;"/>
</div>

The classes: ui-widget ui-widget-content ui-corner-all ui-state-default are all from the jQuery user interface CSS framework.

In short this plugin uses a mixture of HTML elements, CSS styling and jQuery events to mimic a slider control

Answer 2

It's open source, you can see the source here. It does not use canvas, just html elements.