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
