JQuery-ui range slider with numbers under handlers not working properly

Question

I need to do a slider range that shows the quantity under each one of the handlers, I followed a working fiddle that uses jquery 1.6.2 and jquery-ui 1.8.5, but in my project I use jquery 2.1.4 and the jquery-ui 1.11.4. It almost works, but there are some issues:

There is a fixed 0 under the begining of the slider bar.
The quantity only appears when I move one of the buttons, and it only appears under the button I am moving. When I move the other button the quantity disapears from the first button and shows in the actual button.
Console shows me a "Uncaught TypeError: Cannot read property 'nodeType' of undefined"

This is my actual range slider with the commented issues: https://jsfiddle.net/zykw73tj/1/

This is the original fiddle: http://jsfiddle.net/william/RSkpH/1/

I obtained the working fiddle from this previous question: jQuery UI Slider: move the value along (with) the handle

If I change the JQuery and the JQuery-UI of the original fiddle for the new ones I see the same issues than in mine.

Thanks

    -- HTML --
<div id="slider"></div>
<div id="min"></div>
<div id="max"></div>


-- JQUERY --
$( document ).ready(function() {

  $("#slider").slider({
      range: true,
      min: 0,
      max: 1000,
      step: 10,
      values: [0, 1000],
      slide: function(event, ui) {
          var delay = function() {
              var handleIndex = $(ui.handle).data('index.uiSliderHandle');
              var label = handleIndex == 0 ? '#min' : '#max';
              $(label).html(ui.value + '€').position({
                  my: 'center top',
                  at: 'center bottom',
                  of: ui.handle,
                  offset: "0, 10"
              });
          };

          // wait for the ui.handle to set its position
          setTimeout(delay, 5);
      }
  });

  $('#min').html($('#slider').slider('values', 0) + '€').position({
      my: 'center top',
      at: 'center bottom',
      of: $('#slider a:eq(0)'),
      offset: "0, 10"
  });

  $('#max').html($('#slider').slider('values', 1) + '€').position({
      my: 'center top',
      at: 'center bottom',
      of: $('#slider a:eq(1)'),
      offset: "0, 10"
  });

});

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

There are a couple things you have to rectify.

var handleIndex = $(ui.handle).data('index.uiSliderHandle');

here handleIndex is undefined. Try index() instead of using data like $(ui.handle).index()
Uncaught TypeError: Cannot read property 'nodeType' of undefined the above error is caused by the below two lines, since there is no anchor tag present. Instead try span because the handle is shown by using span element.

of: $(#slider a:eq(0)),

of: $('#slider a:eq(1)'),

Instead try

of: $(#slider span:eq(0)),

of: $('#slider span:eq(1)'),

See working demo here

Hope this helps...

score 0 · Answer 2 · answered Jan 07 '16 at 12:40

I think you have problem with Jquery Core & UI version.

You can try this

  $(function() {

    $("#slider").slider({
        range: true,
        min: 0,
        max: 500,
        step: 10,
        values: [0, 500],
        slide: function(event, ui) {
            var delay = function() {
                var handleIndex = $(ui.handle).data('index.uiSliderHandle');
                
                var label = handleIndex == 0 ? '#min' : '#max';
                
                $(label).html('$' + ui.value).position({
                    my: 'center top',
                    at: 'center bottom',
                    of: ui.handle,
                    offset: "0, 10"
                });
            };
            
            // wait for the ui.handle to set its position
            setTimeout(delay, 5);
        }
    });

    $('#min').html('$' + $('#slider').slider('values', 0)).position({    
        my: 'center top',
        at: 'center bottom',
        of: $('#slider a:eq(0)'),
        offset: "0, 10"
    });
    
    $('#max').html('$' + $('#slider').slider('values', 1)).position({

        my: 'center top',
        at: 'center bottom',
        of: $('#slider a:eq(1)'),
        offset: "0, 10"
    });


  });

  #slider 
  {
      width: 80%;
      margin-left: 1em;
  }

  #min, #max {
      width: 50px;
      text-align: center;
  }

<script src="//code.jquery.com/jquery-1.6.2.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>

<link href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<div id="slider"></div>
<div id="min"></div>
<div id="max"></div>

JQuery-ui range slider with numbers under handlers not working properly

2 Answers2