#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2013
    Posts
    3
    Rep Power
    0

    Changing the default slider JQ UI


    With JQ UI create a standard slider. Wherever found written how to change some of its parameters: size, min.size, the maximum ...
    But never found a place as a standard for JQ UI slider to make your: put a picture. That is: change the slider.

    Code:
    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8" />
    <title>jQuery UI Slider - Default functionality</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css" />
    <style>
    #slider-vertical{height: 600px; background-color: #0F3;}	
    </style>
    <script>
    $(function() {
    $( "#slider-vertical" ).slider({
    orientation: "vertical",
    range: "min",
    min: 0,
    max: 100,
    value: 60,
    slide: function( event, ui ) {
    $( "#amount" ).val( ui.value );
    }
    });
    });
    </script>
    </head>
    <body>
    <div id="slider-vertical"></div>
    </body>
    </html>
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2013
    Posts
    101
    Rep Power
    26
    The documentation (usually a good place to start for these sort of things) say you can style it by adding a rule for ".ui-slider-handle". I find that the CSS selector seems to require using ".ui-slider .ui-slider-handle" though. For instance:
    Code:
    .ui-slider .ui-slider-handle {
        background-image: url(http://www.irs.gov/image/money_icon.gif);
        width: 45px;
        height: 33px;
    }
    Here is a jsfiddle example
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2013
    Posts
    3
    Rep Power
    0

    ...


    Many thanks. The answer is found. Topic closed.

IMN logo majestic logo threadwatch logo seochat tools logo