JQuery UI Slider Positioning

Question

I am using the slider from http://jqueryui.com/slider/ , especially the fixed slider. I want to move this slider down to the bottom of the page, but when I tried to set margin-bottom: 5px in the .ui-slider and ui-slider-range-min, nothing happens. Can somebody please assist me?

.ui-slider {
position: relative;
text-align: left;
margin-bottom: 5px;
}
.ui-slider .ui-slider-handle {
position: absolute;
z-index: 2;
width: 1.2em;
height: 1.2em;
cursor: default;
}
.ui-slider .ui-slider-range {
position: absolute;
z-index: 1;
font-size: .7em;
display: block;
border: 0;
background-position: 0 0;
}

/* For IE8 - See #6727 */
.ui-slider.ui-state-disabled .ui-slider-handle,
.ui-slider.ui-state-disabled .ui-slider-range {
filter: inherit;
}

.ui-slider-horizontal {
height: .8em;
}
.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;
margin-bottom: 5px;
}
.ui-slider-horizontal .ui-slider-range-max {
right: 0;
}

.ui-slider-vertical {
width: .8em;
height: 100px;
}
.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;
}

Answer 1

Just modify the css on the original slider and not on the classes added by jquery-ui-slider

Here is an example:

<div id="slider"></div>

CSS

#slider {
    width:80%;
    margin-left:25px;
     margin-top:400px;   
}

Fiddle