jQuery slider's handle doesn't slide_问答_开发者

开发者 https://www.devze.com 2023-04-02 18:41 出处：网络

I\'m trying to setup a simple slider with custom design but the handle of slider doesn\'t work. I think I missed something easy cuz I\'m pretty sleepy. I\'d glad if you can take a look at the sample c

相关专题：jquery scroll

I'm trying to setup a simple slider with custom design but the handle of slider doesn't work. I think I missed something easy cuz I'm pretty sleepy. I'd glad if you can take a look at the sample code;

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title></title>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>

        <style type="text/css" rel="stylesheet">
            body { background-color: green; }

            #slider {
                float: left;
                width: 开发者_高级运维19px; height: 338px;
                background-image: url('images/bg_scroller.png');
                background-position: center center;
                background-repeat: no-repeat;
            }

            #slider-handle {
                position: absolute; cursor: pointer;
                width: 19px; height: 31px;
                background-image: url('images/scroller.png');
                background-position: center center;
                background-repeat: no-repeat;
            }
        </style>

        <script type="text/javascript">
            $(document).ready(function(){
                $('#slider').slider({
                    orientation: "vertical",
                    min: 0,
                    max: 100,
                    handle: '#slider-handle',
                    stop: function (event, ui) {
                        console.log("stop",ui)
                        //ul.animate({'left' : ui.value * -1}, 500);
                    },
                    slide: function (event, ui) {
                        console.log("slide",ui)
                        //ul.css('left', ui.value * -1);
                    }
                });
            });
        </script>

    </head>

    <body>

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

    </body>
</html>

Sample code is placed also here; http://www.zpnd.com/sak/slider.php

You are are creating a handle that the jQuery slider widget isn't using. Try this out:

http://jsfiddle.net/petersendidit/YkjGN/2/

'handle' is not an option for the jQuery UI's slider.

Remove that slider-handle div and the 'handle' option, and change your css to '.ui-slider-handler' instead and it should work.

You can see the Slider documentation here. http://jqueryui.com/demos/slider/#option-animate

The reason is #slider-handle width is same as #slider width i.e 19px. The handle width should be less so that you will see its moving.