Im new to jQ and jQ UI but I have managed to get pretty far by myself.

I have really struggle the last 4-5 hours. Searching for all kinds of solutions, but I CAN'T really style the slider button at all! I have tried all sorts of .ui-slider-handler class but It wont style at all.. So I really need your help with this!

I have only managed to find 1 way to style the inner slider with a different color.

I would also like to know where I can find all the css classes for styling. So far I have managed to find some in the ui files, but its a loong 1 line list.. and there's not much information about styling on the slider-help page either! Thanks in advance :)

HTML/JS

1. <div id="slider"></div>
3. <script type="text/javascript">
4. $(document).ready(function(){
5. 
   
6. $(function() {
7. $( "#slider" ).slider({
8. range: "min",
9. value: 0,
10. min: 0,
11. max: 15000,
12. slide: function( event, ui ) {
13. $( "#amount" ).val(ui.value );
14. }
15. });
16. $( "#amount" ).val($( "#slider" ).slider( "value" ) );
17. });
18. });
19. </script>

CSS

2. #slider{
3. width: 400px;
4. margin: 50px 0 0 50px;
5. background-color: #fff;
6. }
7. 
   
8. .ui-slider-range.ui-widget-header{
9. background: #e4b15f;
10. }
11. 
    
12. .ui-slider .ui-slider-handle {
13. position: absolute;
14. z-index: 2;
15. width: 1.2em;
16. height: 1.2em;
17. cursor: default;
18. outline: none;
19. }