css jquery-ui jquery-plugins select-to-slider

How to change the handle of SelectToUISlider JQuery puglin?

I am using a Slider component from Filament Group. You can view the component here http://filamentgroup.com/lab/update_jquery_ui_slider_from_a_select_element_now_with_aria_support/

We have modified the style sheet to remove the labels and Drop-downs, which we doesn't needed. Then i have tried to change the Slider Handles with some custom images. We are getting some weird result. Slider is not displaying the Handles itself.

Is there anybody has some samples to change the Slider handles? I am not sure, what i am doing wrong.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />

        <title>Using Progressive Enhancement to Convert a Select Box Into an Accessible jQuery UI Slider</title>

        <script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
        <script type="text/javascript" src="js/selectToUISlider.jQuery.js"></script>

        <link rel="stylesheet" href="css/redmond/jquery-ui-1.8.16.custom.css" type="text/css" /> 
        <script type="text/javascript">
            $(function(){
                $('select#valueA, select#valueb').selectToUISlider(); 
            }); 
        </script>   
    </head> 
    <body>  
        <div style="margin-top:65px;">
            <fieldset> 
                <select name="valueA" id="valueA" style="display:none">
                    <option value="6am">6:00</option>
                    <option value="7am">7:00</option>
                    <option value="8am">8:00</option>
                    <option value="9am" selected="selected">9:00</option>
                    <option value="10am">10:00</option>
                    <option value="11am">11:00</option>
                    <option value="Noon">Noon</option>
                    <option value="1pm">1:00</option>
                    <option value="2pm">2:00</option>
                    <option value="3pm">3:00</option>
                    <option value="4pm">4:00</option>
                    <option value="5pm">5:00</option>
                    <option value="6pm">6:00</option>
                    <option value="7pm">7:00</option>
                    <option value="8pm">8:00</option>
                    <option value="9pm">9:00</option>
                    <option value="10pm">10:00</option>
                    <option value="11pm">11:00</option>
                    <option value="12pm">12:00</option>
                </select>
                <select name="valueB" id="valueB" style="display:none">
                    <option value="6am">6:00</option>
                    <option value="7am">7:00</option>
                    <option value="8am">8:00</option>
                    <option value="9am">9:00</option>
                    <option value="10am">10:00</option>
                    <option value="11am">11:00</option>
                    <option value="Noon">Noon</option>
                    <option value="1pm">1:00</option>
                    <option value="2pm">2:00</option>
                    <option value="3pm">3:00</option>
                    <option value="4pm">4:00</option>
                    <option value="5pm">5:00</option>
                    <option value="6pm">6:00</option>
                    <option value="7pm">7:00</option>
                    <option value="8pm">8:00</option>
                    <option value="9pm" selected="selected">9:00</option>
                    <option value="10pm">10:00</option>
                    <option value="11pm">11:00</option>
                    <option value="12pm">12:00</option>
                </select>
            </fieldset> 
        </div>  
    </body>
</html>

Style: (I Couldn't post the complete style)

fieldset { border:0; padding:4px 10px; margin-top:10px;}/*
        label {font-weight: normal; margin-right: .5em; font-size: 1.1em;} 
        select {margin-right: 1em;} */
        .ui-slider {clear: both; }

.ui-slider { text-decoration: none !important; position: relative; text-align: left; height:4px; border: 1px solid #fcfdfd; background: #FFFFFF url(images/jslider.plastic.png) 0 0px repeat-x;}
.ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: 10px; display: block; border: 0; }
.ui-slider .ui-slider-handle  
{
    position: absolute; 
    z-index: 2; 
    width: 1.2em;
    /*height: 1.4em;*/ 
    cursor: default;
    overflow: visible !important;
    background: #FFFFFF url(images/jslider.plastic.png) 0 -40px repeat-x; 
}

.ui-slider-horizontal { height: 20px; }
.ui-slider-horizontal .ui-slider-handle { top: -.3em; margin-left: -.6em;background: #FFFFFF url(images/jslider.plastic.png) 0 -40px repeat-x; }
.ui-slider-horizontal .ui-slider-range { top: 0; height:4px; border: 1px solid #5F5F5F; background: #5c9ccc url(images/jslider.plastic.png) 0 -20px;}
.ui-slider-horizontal .ui-slider-range-min { left: 0; }
.ui-slider-horizontal .ui-slider-range-max { right: 0; } 


.ui-slider .ui-slider-handle .ui-state-hover, .ui-slider .ui-slider-handle .ui-state-focus { 
    background: #f5f8f9 url(images/jslider.plastic.png) 0 -40px repeat-x; 
    font-weight: bold; color: #1d5987; outline: none; }

.ui-slider .ui-slider-handle .ui-state-active { /*border: 1px solid #79b7e7; */background: #f5f8f9 url(images/jslider.plastic.png) 0 -40px repeat-x; font-weight: bold; color: #e17009; outline: none; }

.ui-slider .ui-slider-tooltip {
    display: none;
}
.ui-slider .screenReaderContext {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    left: -999999999px;
}
.ui-slider .ui-state-active .ui-slider-tooltip, .ui-slider .ui-state-focus .ui-slider-tooltip, .ui-slider .ui-state-hover .ui-slider-tooltip {
    display: block;
    position: absolute;
    bottom: 2.5em;
    text-align: center;
    /*padding: .3em .2em .4em;*/
    font-size: 10px;
    width: 8em;
    margin-left: -3.7em;
}
.ui-slider .ui-slider-tooltip .ui-tooltip-pointer-down, .ui-slider .ui-slider-tooltip .ui-tooltip-pointer-down-inner {
    position: absolute; 
    display: block;
    width:0; 
    height:0; 
    border-bottom-width: 0;
    background: none;
}
.ui-slider .ui-slider-tooltip .ui-tooltip-pointer-down {    
    border-left: 7px dashed transparent; 
    border-right: 7px dashed transparent;
    border-top-width: 8px;
    bottom: -8px;
    right: auto;
    left: 50%;
    margin-left: -7px;
}
.ui-slider .ui-slider-tooltip .ui-tooltip-pointer-down-inner {
    border-left: 6px dashed transparent; 
    border-right: 6px dashed transparent;
    border-top: 7px solid #fff;
    bottom: auto;
    top: -9px;
    left: -6px;
}
.ui-slider a {
    text-decoration: none;
}
.ui-slider ol, .ui-slider li, .ui-slider dl, .ui-slider dd, .ui-slider dt {
    list-style: none;
    margin: 0;
    padding: 0;
}
.ui-slider ol, .ui-slider dl {
    position: relative;
    top: 1.3em;
    width: 100%;
}
.ui-slider dt {
    top: 1.5em;
    position: absolute;
    padding-top: .2em;
    text-align: center;
    border-bottom: 1px dotted #ddd;
    height: .7em;
    color: #999;
}
.ui-slider dt span {
    background: #fff;
    padding: 0 .5em;
}
.ui-slider li, .ui-slider dd {
    position: absolute;
    overflow: visible;
    color: #666;
}
.ui-slider span.ui-slider-label {
    position: absolute;
}
.ui-slider li span.ui-slider-label, .ui-slider dd span.ui-slider-label {
    display: none;
}
.ui-slider li span.ui-slider-label-show, .ui-slider dd span.ui-slider-label-show 
{
    display: block;
    font-family:Arial, Helvetica, sans-serif;
    color:#5f5f5f;
    font-weight:bold;
    font-size:11px;
}
.ui-slider span.ui-slider-tic {
    position: absolute;
    left: 0;
    height: 5px;
    top: -1.3em;
}
.ui-slider li span.ui-widget-content, .ui-slider dd span.ui-widget-content {
    border-right: 0;
    border-left-width: 1px;
    border-left-style: solid;
    border-top: 0;
    border-bottom: 0;
}
.ui-slider .first .ui-slider-tic, .ui-slider .last .ui-slider-tic {
    display: none;
}

Solution

I figured out myself. It's CSS change. Here is my css code.

.ui-slider 
{ 
    position: relative; 
    text-align: left;  
    background: #FFFFFF url(jslider.plastic.png) 0 0px repeat-x; 
}
.ui-slider .ui-slider-handle 
{ 
    position: absolute; 
    z-index: 3; 
    width: 1.2em; height: 1.2em; 
    cursor: default; 
}
.ui-slider .ui-slider-range 
{ 
    position: absolute; 
    z-index: 2; 
    font-size: .7em; 
    display: block; 
    border: 0; }

.ui-slider-horizontal { height: .3em; }
.ui-slider-horizontal .ui-slider-handle { margin-left: -.6em; }
.ui-slider-horizontal .ui-slider-range 
{ 
    top: 0; 
    height: 100%; 
    border: 1px solid #5F5F5F; 
    background: #5c9ccc url(jslider.plastic.png) no-repeat 0 -20px; 
}
.ui-slider-horizontal .ui-slider-range-min { left: 0; }
.ui-slider-horizontal .ui-slider-range-max { right: 0; } 

/*NEW SLIDER STYLES FOR SCALE, ETC*/
/* slider widget */
.ui-slider  {
    text-decoration: none !important;
}
.ui-slider .ui-slider-handle  {
    overflow: visible !important;
    background: url(jslider.plastic.png) no-repeat 0 0;
    width: 13px; height: 20px; background-position: 0 -40px; position: absolute; 
    left: 20%; top: -5px; 
    border: none;
    margin-left: -6px; cursor: pointer; cursor: hand;
} 

.ui-slider .ui-slider-handle .ui-state-hover, .ui-slider .ui-slider-handle .ui-state-focus { 
    background: #f5f8f9 url(jslider.plastic.png) 0 -40px repeat-x; 
    font-weight: bold; color: #1d5987; outline: none; }

.ui-slider .ui-slider-handle .ui-state-active { background: #f5f8f9 url(ijslider.plastic.png) 0 -40px repeat-x; font-weight: bold; color: #e17009; outline: none; }


.ui-slider .ui-slider-tooltip {
    display: none;
}
.ui-slider .screenReaderContext {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    left: -999999999px;
}
.ui-slider .ui-state-active .ui-slider-tooltip, .ui-slider .ui-state-focus .ui-slider-tooltip, .ui-slider .ui-state-hover .ui-slider-tooltip {
    display: block;
    position: absolute;
    bottom: 2.5em;
    text-align: center;
    padding: .3em .2em .4em; 
    font-size: .9em;
    width: 8em;
    margin-left: -3.7em;
}
.ui-slider .ui-slider-tooltip .ui-tooltip-pointer-down, .ui-slider .ui-slider-tooltip .ui-tooltip-pointer-down-inner {
    position: absolute; 
    display: block;
    width:0; 
    height:0; 
    border-bottom-width: 0;
    background: none;
}
.ui-slider .ui-slider-tooltip .ui-tooltip-pointer-down {    
    border-left: 7px dashed transparent; 
    border-right: 7px dashed transparent;
    border-top-width: 8px;
    bottom: -8px;
    right: auto;
    left: 50%;
    margin-left: -7px;
}
.ui-slider .ui-slider-tooltip .ui-tooltip-pointer-down-inner {
    border-left: 6px dashed transparent; 
    border-right: 6px dashed transparent;
    border-top: 7px solid #fff;
    bottom: auto;
    top: -9px;
    left: -6px;
}
.ui-slider a {
    text-decoration: none;
}
.ui-slider ol, .ui-slider li, .ui-slider dl, .ui-slider dd, .ui-slider dt {
    list-style: none;
    margin: 0;
    padding: 0;
}
.ui-slider ol, .ui-slider dl {
    position: relative;
    top: 1.3em;
    width: 100%;
}
.ui-slider dt {
    top: 1.5em;
    position: absolute;
    padding-top: .2em;
    text-align: center;
    border-bottom: 1px dotted #ddd;
    height: .7em;
    color: #999;
}
.ui-slider dt span {
    background: #fff;
    padding: 0 .5em;
}
.ui-slider li, .ui-slider dd {
    position: absolute;
    overflow: visible;
    color: #666;
}
.ui-slider span.ui-slider-label {
    position: absolute;
}
.ui-slider li span.ui-slider-label, .ui-slider dd span.ui-slider-label {
    display: none;
}
.ui-slider li span.ui-slider-label-show, .ui-slider dd span.ui-slider-label-show {
    display: block;
    font-family:Arial, Helvetica, sans-serif;
    color:#5f5f5f;
    font-weight:bold;
    font-size:11px;
}
.ui-slider span.ui-slider-tic {
    position: absolute;
    left: 0;
    height: .3em;
    top: -1.3em;  
    background-color:#5f5f5f; 
    /*z-index:1;*/
}
.ui-slider li span.ui-widget-content, .ui-slider dd span.ui-widget-content {
    border-right: 0;
    border-left-width: 1px;
    border-left-style: solid;
    border-top: 0;
    border-bottom: 0;
}
.ui-slider .first .ui-slider-tic, .ui-slider .last .ui-slider-tic {
    display: none;
}

.slider-fieldset { border:0; margin: 0.3em; height: 3.8em;}  
.slider-select {margin-right: 1em; float: left;}
.ui-slider {clear: both; top:0.8em; margin-left:1.2em; width:80%;
            font-size: 70%; font-family:"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif; }