I am using a Slider component from Filament Group. You can view the component

Question

0

Asked: May 27, 20262026-05-27T22:59:58+00:00 2026-05-27T22:59:58+00:00

I am using a Slider component from Filament Group. You can view the component

0

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;
}

Report

Leave an answer
Cancel reply

You must login to add an answer.

Need An Account,

1 Answer

Editorial Team · Answer 1 · 2026-05-27T22:59:59+00:00

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; }

Sign Up

Sign In

Forgot Password

The Archive Base Latest Questions

I am using a Slider component from Filament Group. You can view the component

Leave an answerCancel reply

1 Answer

Leave an answer
Cancel reply