Scaling down a slider and adding javascript to the starting and stopping positions

Scaling down a slider and adding javascript to the starting and stopping positions

Hello I am working with a JQuery slider:

    1. <!doctype html>  
    2. <html lang="en">  
    3. <head>  
    4. <meta charset="utf-8" />  
    5. <title>jQuery UI Slider - Default functionality</title>  
    6. <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />  
    7. <script src="http://code.jquery.com/jquery-1.9.1.js"></script>  
    8. <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>  
    9. <link rel="stylesheet" href="/resources/demos/style.css" />  
    10. <script>  
    11. $(function() {  
    12. $( "#slider" ).slider();  
    13. });  
    14. </script>  
    15. </head>  
    16. <body>  
    17. <div id="slider"></div>  
    18. </body>  
    19. </html> 
  2. I need to be able to scale it down, say to about 20% of its size.
3.  In addition, I need to be able to add start and stop positions, something similar to what I had done with some buttons:

    1. <input type="image" src="#/back.png" class="bottom" alt="Slower Scroll Speed" width="24" height="24" onClick="document.getElementById('test').setAttribute('scrollamount',1,0);">  
    2. <input type="image" src="#/start.png" alt="Start Scrolling" width="24" height="24" onClick="document.getElementById('test').start();">  
    3. <input type="image" src="#/forward.png" alt="Faster Scroll Speed" width="24" height="24" onClick="document.getElementById('test').setAttribute('scrollamount',8,0);">  
    4. <input type="image" src="#/stop.png" alt="Stop Scrolling" width="24" height="24" onClick="document.getElementById('test').stop();">