I have the following 2 fiddles:

http://jsfiddle.net/uxp56hL0/ this one is using jquery 3.6.0 and jquery ui 1.13.1

http://jsfiddle.net/34oqnmca/2/ this one is using jquery 1.6.2 and jquery ui 1.8.4

the second one works correctly, by the first one (with a newer version then) does not. I get the error: Uncaught TypeError: raw is undefined

are there breaking changes in newer version that induce this behaviour ? I tried to look for some changes between 1.6 and 3.6 (huge leap, I confess) but with no luck...

CodePudding user response：

I suspect that your CDNs had some odd libraries or they were not linking properly. I made some minor changes to the Fiddle and it is working properly.

Example: https://jsfiddle.net/Twisty/eobnxvza/8/

JavaScript

$(function() {
  var myarray = ['2022-01', '2022-02', '2022-03', '2022-04', '2022-05', '2022-06', '2022-07', '2022-08', '2022-09', '2022-10', '2022-11', '2022-12']

  $("#slider").slider({
    range: true,
    min: 0,
    max: 11,
    step: 1,
    values: [4, 5],
    slide: function(event, ui) {
      var delay = function() {
        var handleIndex = ui.handleIndex;
        var label = handleIndex == 0 ? '#min' : '#max';
        $(label).html(myarray[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);
    }
  });

  console.log('debug: '   $('#slider').slider('values', 0));
  $('#min').html(myarray[$('#slider').slider('values', 0)]).position({
    my: 'center top',
    at: 'center bottom',
    of: $('#slider .ui-slider-handle:eq(0)'),
    offset: "0, 10"
  });

  console.log('debug: '   $('#slider').slider('values', 1));
  $('#max').html(myarray[$('#slider').slider('values', 1)]).position({
    my: 'center top',
    at: 'center bottom',
    of: $('#slider .ui-slider-handle:eq(1)'),
    offset: "0, 10"
  });
});

I wrapped it and adjusted how the handles are referenced. The raw error was coming up when running Line 35 or 36. I addressed that and things still did not load properly from the CSS. So I switched it to the following resources:

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>

This works properly now.