slider

Benchmark created on

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
asdasd
$(function() {
  // Slider


  function Slider(obj, values, minMax) { // class
    var elementOpts = {
      tag: 'span',
      Class: 'ui-slider-value',
      style: {
        'position': 'absolute',
        'top': '10px'
      }
    };
    var element = $(document.createElement(elementOpts.tag)).addClass(elementOpts.Class).css(elementOpts.style);
    var methods = {
      updateValues: function(event, ui) {
        $('.' + elementOpts.Class, obj).first().text(ui.values[0]);
        $('.' + elementOpts.Class, obj).last().text(ui.values[1]);
      },
      updatePosition: function() {
        $('.' + elementOpts.Class, obj).first().css('left', $('a:first', obj).css('left'));
        $('.' + elementOpts.Class, obj).last().css('left', $('a:last', obj).css('left'));
      }
    };
    obj.slider({
      range: true,
      values: values,
      min: minMax[0],
      max: minMax[1],
      create: function() {
        obj.append(element.text($(this).slider("values", 0)));
        obj.append(element.clone().text($(this).slider("values", 1)));
        methods.updatePosition();
      },
      slide: function(event, ui) {
        methods.updateValues(event, ui);
        methods.updatePosition();
      },
      change: function(event, ui) {
        methods.updateValues(event, ui);
        methods.updatePosition();
      }
    });
  }

  $('.slider').each(function() {
    new Slider($(this), [20, 80], [0, 290]);
  });
});
ready
asdasdasd
$(function() {
  // Slider


  function Slider(obj, values, minMax) { // class
    var elementOpts = {
      tag: 'span',
      Class: 'ui-slider-value',
      style: {
        'position': 'absolute',
        'top': '10px'
      }
    };
    var element = $(document.createElement(elementOpts.tag)).addClass(elementOpts.Class).css(elementOpts.style);
    var methods = {
      updateValues: function(event, ui) {
        $('.' + elementOpts.Class, obj).first().text(ui.values[0]);
        $('.' + elementOpts.Class, obj).last().text(ui.values[1]);
      },
      updatePosition: function() {
        $('.' + elementOpts.Class, obj).first().css('left', $('a:first', obj).css('left'));
        $('.' + elementOpts.Class, obj).last().css('left', $('a:last', obj).css('left'));
      }
    };
    obj.slider({
      range: true,
      values: values,
      min: minMax[0],
      max: minMax[1],
      create: function() {
        obj.append(element.text($(this).slider("values", 0)));
        obj.append(element.clone().text($(this).slider("values", 1)));
        methods.updatePosition();
      },
      slide: function(event, ui) {
        methods.updateValues(event, ui);
        methods.updatePosition();
      },
      change: function(event, ui) {
        methods.updateValues(event, ui);
        methods.updatePosition();
      }
    });
  }

  $('.slider').each(function() {
    new Slider($(this), [20, 80], [0, 290]);
  });
});
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.