jQuery UI Slider - Disable click on slider track

后端未结

关注

 13  1242

I\'m trying to find a way to disable the click on my jQuery UI Slider\'s track. Clicking on the handle is ok but I do not want the handle to respond if the user clicks on t

相关标签:

13条回答

忘掉有多难

2020-12-31 09:09

Having spent a while looking for a solution or something that would help get me closer to what I was after, I came up with the following, which appears to work in all browsers:

    var _sliderEvents = [];     

    $('.slider').each(function (i) {
        var _slider = $(this);
        _sliderEvents.push($._data(_slider[0]).events.mousedown);
        $._data(_slider[0]).events.mousedown = {};
        _slider.on({
            mouseenter: function () {
                $._data(_slider[0]).events.mousedown = _sliderEvents[i];
            },
            mouseleave: function () {
                $._data(_slider[0]).events.mousedown = {};
            }
        }, '.ui-slider-handle');
    });

http://jsfiddle.net/digits/fxef8398/ You're welcome :)

0 讨论(0)

闹比i

2020-12-31 09:11
```
    $("#slider").slider({ disabled: true });
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

予麋鹿

2020-12-31 09:14

There's a non-JS solution to this as well, using only two lines of CSS:

/* Supress pointer events */
#navSlider { pointer-events: none; }
/* Enable pointer events for slider handle only */
#navSlider .ui-slider-handle { pointer-events: auto; }

0 讨论(0)

轻奢々

2020-12-31 09:16

This one did the trick for me (just make sure to detach the document event lister when destroying the slider object)

            <!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.11.4/themes/smoothness/jquery-ui.css">
              <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
              <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

              <style>
                .slider.ui-slider-disabled {
                    opacity: 1;
                }
              </style>

              <script>

              $(function() {

                $(".slider").slider({
                    range: true,

                    create: function( event, ui ) {

                       var disabled = true;
                       $(".slider").slider( "disable" );

                       $('.ui-slider-handle').on('mousedown',    function(event) {
                          disabled = false;
                          $(".slider").slider( "enable" );
                       });  

                        $(document).on('mouseup', function(event) {
                          if (!disabled) {
                             $(".slider").slider("disable");
                             disabled = true;
                          }
                       });  
                    }
                });

              });

              </script>



            </head>
            <body>
            <div class="slider"></div>

            </body>
            </html>

0 讨论(0)

别跟我提以往

2020-12-31 09:22

Working fiddle.

var sliding = false;

var slide = function (ev, ui) {

    if (ev.originalEvent.type !== 'mousemove') {
        sliding = false;
        return false;
    }

    sliding = true;

    console.log("I'm sliding.");

};

var start = function (ev, ui) {

    if (!sliding) {
       console.log("I'm not sliding.");
    }

};

var stop = function (ev, ui) {

    sliding ? console.log('I slid.') : console.log('I clicked.');

    sliding = false;

};

$('#slider').slider({
    slide: slide,
    start: start,
    stop: stop,
});

0 讨论(0)

梦如初夏

2020-12-31 09:26
I know this is already old and answered, but a non-javascript solution I came up with was to put the slider in a wrapper, style the wrapper to look how I wanted the track to look and set the height of the slider to 0.

Some margin tweaking is required to have everything line up but it was fairly easy and worked perfectly for me.
```
<div class="slide-wrap">
    <div class="slider"></div>
</div>

.slide-wrap {
    width: 300px;
    height: 15px;
    border: solid 1px #666;
    margin-top: 10px;
}

.slider {
    width: 100%;
    height: 0;
    border: none;
    overflow: visible;
}

.slider .ui-slider-handle {
     margin: 2px 0 0;   
}
```
http://jsfiddle.net/83Hwf/1/
0 讨论(0)
发布评论:

提交评论
- 加载中...