Slider Position

Posted by RobinHood on Stack Overflow See other posts from Stack Overflow or by RobinHood
Published on 2010-12-28T04:18:46Z Indexed on 2010/12/28 5:54 UTC
Read the original article Hit count: 257

Filed under:
|
|
|

I had used this code for to create a slider. It's working fine. I want to place the slider next to my label control. Like this (Slidder : Slidder Bar) How to do that?

               <div>
                    <tr>
                        <td class="aln-rht">
                            <asp:Label ID="Literal4" runat="server" Text="Slidder :" Font-Bold="true" />
                        </td>
                        <td>
                            <%=Html.DropDownList("Scale", null, "--Select Scale--", new { id = "speed1" , Style = "display:none"})%>
                        </td>
                    </tr>
                </div>

 <script type="text/javascript">
    $(function () {
        var abc = $('select#speed1').selectToUISlider().next();
        fixToolTipColor();
    });
    function fixToolTipColor() {
        $('.ui-tooltip-pointer-down-inner').each(function () {
            var bWidth = $('.ui-tooltip-pointer-down-inner').css('borderTopWidth');
            var bColor = $(this).parents('.ui-slider-tooltip').css('backgroundColor')
            $(this).css('border-top', bWidth + ' Solid ' + bColor);
        });
    }
</script>

The ui.slider.extras.css, selectToUISlider.JQuery.js and ui.slider.js files I had used

This is JQuery-ui-1.7.1.custom.css, which i am using...

.ui-slider { position: relative; text-align: left; }
.ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.2em; height: 1.2em; cursor: default;  border-color: Maroon; background-color: Olive}
.ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; }
.ui-slider-horizontal { height: .8em; border-color: Olive;}
.ui-slider-horizontal .ui-slider-handle { top: -.3em; margin-left: -.6em; }
.ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; }
.ui-slider-horizontal .ui-slider-range-min { left: 0; }
.ui-slider-horizontal .ui-slider-range-max { right: 0; }
.ui-slider-vertical { width: .8em; height: 100px; border-color: Olive; }
.ui-slider-vertical .ui-slider-handle { left: -.3em; margin-left: 0; margin-bottom: -.6em; }
.ui-slider-vertical .ui-slider-range { left: 0; width: 100%; }
.ui-slider-vertical .ui-slider-range-min { bottom: 0; }
.ui-slider-vertical .ui-slider-range-max { top: 0; }/* Tabs

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about jQuery