Slider range not setting handles properly

Slider range not setting handles properly

I'm trying to get jQueryUI Slider w/ two handles working (range).  It keeps generating 8 slider handles instead of just two and they aren't being set to the initial values.  ON change, I call ValSlider to get the values to update in the input box.  I'm using data to pull the required settings into the slider function (I have to share this data w/ other scripts, so using this as easiest way), but I don't see any problems w/ doing that.

Here's a demo:   [ Removed ]

Here's the related simplified code for slider (range):  (Tried to set up jsfiddle, but didn't have jqueryui )

  2. // call to set up slider & handle changes
  3. $('.slider').each(function() {
  4.         var minvalue = parseInt($(this).attr('data-minval'), 10);
  5.         var maxvalue = parseInt($(this).attr('data-maxval'), 10);
  6.         var rangevalue = $(this).attr('data-rangeval');
  7.         var stepvalue = parseInt($(this).attr('data-step'), 10);
  8.         if (rangevalue == "true") {var valvalue = $(this).attr('data-val')}
  9.         console.log('Valvalue: ' + valvalue);
  10.         if (rangevalue == "true") { // multiple values
  11.           $(this).slider({
  12.             animate: 'fast',
  13.             min: minvalue,
  14.             max: maxvalue,
  15.             range: rangevalue,
  16.             step: stepvalue,
  17.             values: valvalue,
  18.             change: function(event, ui) {
  19.               console.log('1Change: ' + ui.values[0] + ' 2Change: ' + ui.values[1]);
  20.               $(this).prev().val(ui.values[0] + "-" + ui.values[1]);
  21.               $(this).attr('data-change', 1);
  22.               var mychange = ui.handle;
  23.               console.log('Uihandle: ' , mychange);
  24.               var slname = $(mychange).parent().attr('name');
  25.               valSlider(slname,0)}
  26.           });
  27.         }
  28. }); 

  30. function valSlider(selname) {
  31.     var myname = selname;
  32.     console.log('valSlider - Slider name: ' + myname);
  33.     if (myname == "init") { // set initial value
  34.         // std form
  35.         console.log('Inside init/std form');
  36.         $('.slider').each(function() {
  37.           // multiple values
  38.           var sval = $(this).attr('data-val');
  39.           sval = sval.replace(/\, /g,'-').slice(1, -1);
  40.           console.log('Sval init/std: ' + sval);  
  41.           $(this).prev().val(sval);
  42.         });
  43.     }  
  44.     $('.slider').each(function() {
  45.       var slch = $(this).attr('data-change');
  46.       if (myname == "init") {return;} // don't run on init
  47.       console.log('Slider Change: ' + slch);
  48.       // indiv valuate
  49.       if (slch == 0) {return;}  // stop on unchanged indiv. sliders
  50.       console.log('Indiv Valuate');
  51.       var mythis = $('.slider[name="'+myname+'"]');
  52.       console.log('Mythis: ' , mythis);  
  53.       console.log('Mythis-name: ' , mythis.attr('name'));
  54.       console.log('Gen Val: ' + mythis.val());
  55.       console.log(' Slider Val: ' + mythis.slider('values'));
  56.       var slreq = 0;
  57.       if (mythis.attr('required') || mythis.hasClass('ok')) {console.log('Slider Req'); slreq = 1}
  58.       var slalert = 0;
  59.       if (slch == 0) {console.log('SliderCheck is 0'); slalert = 1}
  60.       if (slalert == 0 && slreq == 1) { // change req. to ok symbol
  61.         console.log('Change to OK');
  62.         mythis.removeAttr("required");
  63.         mythis.addClass("ok");
  64.         mythis.css({'border-color': '#cfd9db'});
  65.         if (mythis.attr('data-rangeval') == "false") {var nval = mythis.val()}
  66.         if (mythis.attr('data-rangeval') == "true") {
  67.           var fval = mythis.slider('values', 0);
  68.           var lval = mythis.slider('values', 1);
  69.           var nval = fval + '-' + lval;
  70.         }
  71.         console.log('Slider val1: ' + fval + ' Slider val2: ' + lval);
  72.         console.log('Slider val @ update: ' + nval);
  73.         mythis.prev().val(nval);
  74.       }   
  75.     });
  76.   }
  77.   valSlider('init',0);