Interactive Sliders

JavaScript performance comparison

Test case created

Preparation code

<div class="container">
  <div class="interactive-slider-scale clearfix fieldset">
    <div class="question-box">
      <div class="question-area">
        <div class="question-container">
          <div class="question">
            <span class="question-text">
              <span class="question-number">
                1.
              </span>
              Gauge Scale - Slider Top
            </span>
          </div>
          <div class="choices clearfix">
            <div class="fieldset interactive gauge horizontal top inactive" data-question-type="gauge"
           data-slider-orientation="horizontal" data-slider-position="top" data-default-value="0">
              <input type="text" class="value" value="5">
              <div class="display">
              </div>
              <div class="slider">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="interactive-slider-scale clearfix fieldset">
    <div class="question-box">
      <div class="question-area">
        <div class="question-container">
          <div class="question">
            <span class="question-text">
              <span class="question-number">
                2.
              </span>
              Gauge Scale - Slider Right
            </span>
          </div>
          <div class="choices clearfix">
            <div class="fieldset interactive gauge vertical right inactive" data-question-type="gauge"
           data-slider-orientation="vertical" data-slider-position="right" data-default-value="0">
              <input type="text" class="value" value="-1" name="ctl02$ctl06$slider-input-1-0">
              <div class="display">
              </div>
              <div class="slider">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="interactive-slider-scale clearfix fieldset">
    <div class="question-box">
      <div class="question-area">
        <div class="question-container">
          <div class="question">
            <span class="question-text">
              <span class="question-number">
                3.
              </span>
              Gauge Scale - Slider Bottom
            </span>
          </div>
          <div class="choices clearfix">
            <div class="fieldset interactive gauge horizontal bottom inactive" data-question-type="gauge"
           data-slider-orientation="horizontal" data-slider-position="bottom" data-default-value="0">
              <input type="text" class="value" value="-1" name="ctl02$ctl06$slider-input-1-0">
              <div class="display">
              </div>
              <div class="slider">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="interactive-slider-scale clearfix fieldset">
    <div class="question-box">
      <div class="question-area">
        <div class="question-container">
          <div class="question">
            <span class="question-text">
              <span class="question-number">
                4.
              </span>
              Gauge Scale - Slider Left
            </span>
          </div>
          <div class="choices clearfix">
            <div class="fieldset interactive gauge vertical left inactive" data-question-type="gauge"
           data-slider-orientation="vertical" data-slider-position="left" data-default-value="0">
              <input type="text" class="value" value="-1" name="ctl02$ctl06$slider-input-1-0">
              <div class="display">
              </div>
              <div class="slider">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="interactive-slider-scale clearfix fieldset">
    <div class="question-box">
      <div class="question-area">
        <div class="question-container">
          <div class="question">
            <span class="question-text">
              <span class="question-number">
                5.
              </span>
              Grades Five Point Scale - Slider Top
            </span>
          </div>
          <div class="choices clearfix">
            <div class="fieldset five-pt-grade interactive top horizontal inactive" data-question-type="five-pt-grade"
           data-slider-orientation="horizontal" data-default-value="1">
              <input type="text" class="value" value="1" name="ctl02$ctl12$slider-input-2-0">
              <div class="display">
              </div>
              <div class="slider">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="interactive-slider-scale clearfix fieldset">
    <div class="question-box">
      <div class="question-area">
        <div class="question-container">
          <div class="question">
            <span class="question-text">
              <span class="question-number">
                6.
              </span>
              Grades Five Point Scale - Slider Right
            </span>
          </div>
          <div class="choices clearfix">
            <div class="fieldset five-pt-grade interactive right vertical inactive" data-question-type="five-pt-grade"
           data-slider-orientation="vertical" data-default-value="5">
              <input type="text" class="value" value="-1" name="ctl02$ctl12$slider-input-2-0">
              <div class="display">
              </div>
              <div class="slider">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="interactive-slider-scale clearfix fieldset">
    <div class="question-box">
      <div class="question-area">
        <div class="question-container">
          <div class="question">
            <span class="question-text">
              <span class="question-number">
                7.
              </span>
              Grades Five Point Scale - Slider Bottom
            </span>
          </div>
          <div class="choices clearfix">
            <div class="fieldset five-pt-grade interactive bottom horizontal inactive" data-question-type="five-pt-grade"
           data-slider-orientation="horizontal" data-default-value="1">
              <input type="text" class="value" value="-1" name="ctl02$ctl12$slider-input-2-0">
              <div class="display">
              </div>
              <div class="slider">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="interactive-slider-scale clearfix fieldset">
    <div class="question-box">
      <div class="question-area">
        <div class="question-container">
          <div class="question">
            <span class="question-text">
              <span class="question-number">
                8.
              </span>
              Grades Five Point Scale - Slider Left
            </span>
          </div>
          <div class="choices clearfix">
            <div class="fieldset five-pt-grade interactive left vertical inactive" data-question-type="five-pt-grade"
           data-slider-orientation="vertical" data-default-value="5">
              <input type="text" class="value" value="-1" name="ctl02$ctl12$slider-input-2-0">
              <div class="display">
              </div>
              <div class="slider">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="interactive-slider-scale clearfix fieldset">
    <div class="question-box">
      <div class="question-area">
        <div class="question-container">
          <div class="question">
            <span class="question-text">
              <span class="question-number">
                9.
              </span>
              Grades Thirteen Point Scale - Slider Top
            </span>
          </div>
          <div class="choices clearfix">
            <div class="fieldset thirteen-pt-grade interactive top horizontal inactive" data-question-type="thirteen-pt-grade"
           data-slider-orientation="horizontal" data-default-value="1">
              <input type="text" class="value" value="-1" name="ctl02$ctl12$slider-input-2-0">
              <div class="display">
              </div>
              <div class="slider">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="interactive-slider-scale clearfix fieldset">
    <div class="question-box">
      <div class="question-area">
        <div class="question-container">
          <div class="question">
            <span class="question-text">
              <span class="question-number">
                10.
              </span>
              Grades Thirteen Point Scale - Slider Right
            </span>
          </div>
          <div class="choices clearfix">
            <div class="fieldset thirteen-pt-grade interactive right vertical inactive" data-question-type="thirteen-pt-grade"
           data-slider-orientation="vertical" data-default-value="13">
              <input type="text" class="value" value="-1" name="ctl02$ctl12$slider-input-2-0">
              <div class="display">
              </div>
              <div class="slider">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="interactive-slider-scale clearfix fieldset">
    <div class="question-box">
      <div class="question-area">
        <div class="question-container">
          <div class="question">
            <span class="question-text">
              <span class="question-number">
                11.
              </span>
              Grades Thirteen Point Scale - Slider Bottom
            </span>
          </div>
          <div class="choices clearfix">
            <div class="fieldset thirteen-pt-grade interactive bottom horizontal inactive" data-question-type="thirteen-pt-grade"
           data-slider-orientation="horizontal" data-default-value="1">
              <input type="text" class="value" value="-1" name="ctl02$ctl12$slider-input-2-0">
              <div class="display">
              </div>
              <div class="slider">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="interactive-slider-scale clearfix fieldset">
    <div class="question-box">
      <div class="question-area">
        <div class="question-container">
          <div class="question">
            <span class="question-text">
              <span class="question-number">
                12.
              </span>
              Grades Thirteen Point Scale - Slider Left
            </span>
          </div>
          <div class="choices clearfix">
            <div class="fieldset thirteen-pt-grade interactive left vertical inactive" data-question-type="thirteen-pt-grade"
           data-slider-orientation="vertical" data-default-value="13">
              <input type="text" class="value" value="-1" name="ctl02$ctl12$slider-input-2-0">
              <div class="display">
              </div>
              <div class="slider">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="interactive-slider-scale clearfix fieldset">
    <div class="question-box">
      <div class="question-area">
        <div class="question-container">
          <div class="question">
            <span class="question-text">
              <span class="question-number">
                13.
              </span>
              Smiley Face Five Point Scale - Slider Top
            </span>
          </div>
          <div class="choices clearfix">
            <div class="fieldset smiley-face interactive top horizontal inactive" data-question-type="smiley-face"
           data-slider-orientation="horizontal" data-default-value="3">
              <input type="text" class="value" value="-1" name="ctl02$ctl12$slider-input-2-0">
              <div class="display">
              </div>
              <div class="slider">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="interactive-slider-scale clearfix fieldset">
    <div class="question-box">
      <div class="question-area">
        <div class="question-container">
          <div class="question">
            <span class="question-text">
              <span class="question-number">
                13.
              </span>
              Smiley Face Five Point Scale - Slider Right
            </span>
          </div>
          <div class="choices clearfix">
            <div class="fieldset smiley-face interactive right vertical inactive" data-question-type="smiley-face"
           data-slider-orientation="vertical" data-default-value="3">
              <input type="text" class="value" value="-1" name="ctl02$ctl12$slider-input-2-0">
              <div class="display">
              </div>
              <div class="slider">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="interactive-slider-scale clearfix fieldset">
    <div class="question-box">
      <div class="question-area">
        <div class="question-container">
          <div class="question">
            <span class="question-text">
              <span class="question-number">
                13.
              </span>
              Smiley Face Five Point Scale - Slider Bottom
            </span>
          </div>
          <div class="choices clearfix">
            <div class="fieldset smiley-face interactive bottom horizontal inactive" data-question-type="smiley-face"
           data-slider-orientation="horizontal" data-default-value="3">
              <input type="text" class="value" value="-1" name="ctl02$ctl12$slider-input-2-0">
              <div class="display">
              </div>
              <div class="slider">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="interactive-slider-scale clearfix fieldset">
    <div class="question-box">
      <div class="question-area">
        <div class="question-container">
          <div class="question">
            <span class="question-text">
              <span class="question-number">
                14.
              </span>
              Smiley Face Five Point Scale - Slider Bottom
            </span>
          </div>
          <div class="choices clearfix">
            <div class="fieldset smiley-face interactive left vertical inactive" data-question-type="smiley-face"
           data-slider-orientation="vertical" data-default-value="3">
              <input type="text" class="value" value="-1" name="ctl02$ctl12$slider-input-2-0">
              <div class="display">
              </div>
              <div class="slider">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="interactive-slider-scale clearfix fieldset">
    <div class="question-box">
      <div class="question-area">
        <div class="question-container">
          <div class="question">
            <span class="question-text">
              <span class="question-number">
                15.
              </span>
              Stop Light Three Point Scale - Slider Top
            </span>
          </div>
          <div class="choices clearfix">
            <div class="fieldset stop-light interactive top horizontal inactive" data-question-type="stop-light"
           data-slider-orientation="horizontal" data-default-value="1">
              <input type="text" class="value" value="-1" name="ctl02$ctl30$slider-input-5-0">
              <div class="display">
              </div>
              <div class="slider">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="interactive-slider-scale clearfix fieldset">
    <div class="question-box">
      <div class="question-area">
        <div class="question-container">
          <div class="question">
            <span class="question-text">
              <span class="question-number">
                16.
              </span>
              Stop Light Three Point Scale - Slider Right
            </span>
          </div>
          <div class="choices clearfix">
            <div class="fieldset stop-light interactive right vertical inactive" data-question-type="stop-light"
           data-slider-orientation="vertical" data-default-value="1">
              <input type="text" class="value" value="-1" name="ctl02$ctl30$slider-input-5-0">
              <div class="display">
              </div>
              <div class="slider">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="interactive-slider-scale clearfix fieldset">
    <div class="question-box">
      <div class="question-area">
        <div class="question-container">
          <div class="question">
            <span class="question-text">
              <span class="question-number">
                17.
              </span>
              Stop Light Three Point Scale - Slider Bottom
            </span>
          </div>
          <div class="choices clearfix">
            <div class="fieldset stop-light interactive bottom horizontal inactive" data-question-type="stop-light"
           data-slider-orientation="horizontal" data-default-value="1">
              <input type="text" class="value" value="-1" name="ctl02$ctl30$slider-input-5-0">
              <div class="display">
              </div>
              <div class="slider">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="interactive-slider-scale clearfix fieldset">
    <div class="question-box">
      <div class="question-area">
        <div class="question-container">
          <div class="question">
            <span class="question-text">
              <span class="question-number">
                18.
              </span>
              Stop Light Three Point Scale - Slider Left
            </span>
          </div>
          <div class="choices clearfix">
            <div class="fieldset stop-light interactive left vertical inactive" data-question-type="stop-light"
           data-slider-orientation="vertical" data-default-value="1">
              <input type="text" class="value" value="-1" name="ctl02$ctl30$slider-input-5-0">
              <div class="display">
              </div>
              <div class="slider">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="interactive-slider-scale clearfix fieldset">
    <div class="question-box">
      <div class="question-area">
        <div class="question-container">
          <div class="question">
            <span class="question-text">
              <span class="question-number">
                19.
              </span>
              Bar - Five Point Scale
            </span>
          </div>
          <div class="choices clearfix">
            <div class="fieldset bar-scale interactive vertical inactive" data-question-type="bar-scale"
           data-slider-orientation="vertical" data-default-value="3" data-min="1" data-max="5"
           data-label1="Good" data-label2="" data-label3="Bad">
              <input name="ctl02$ctl42$slider-input-7-0" type="text" value="-1" class="value">
              <div id="five-pt-vertical-7-0" class="slider">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="interactive-slider-scale clearfix fieldset">
    <div class="question-box">
      <div class="question-area">
        <div class="question-container">
          <div class="question">
            <span class="question-text">
              <span class="question-number">
                20.
              </span>
              Bar - Seven Point Scale
            </span>
          </div>
          <div class="choices clearfix">
            <div class="fieldset bar-scale interactive vertical inactive" data-question-type="bar-scale"
           data-slider-orientation="vertical" data-default-value="4" data-min="1" data-max="7"
           data-label1="Good" data-label2="" data-label3="Bad">
              <input name="ctl02$ctl42$slider-input-7-0" type="text" value="-1" class="value">
              <div class="slider">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="interactive-slider-scale clearfix fieldset">
    <div class="question-box">
      <div class="question-area">
        <div class="question-container">
          <div class="question">
            <span class="question-text">
              <span class="question-number">
                21.
              </span>
              Bar - Nine Point Scale
            </span>
          </div>
          <div class="choices clearfix">
            <div class="fieldset bar-scale interactive vertical inactive" data-question-type="bar-scale"
           data-slider-orientation="vertical" data-default-value="5" data-min="1" data-max="9"
           data-label1="Top Label" data-label2="" data-label3="Bottom Label">
              <input type="text" value="-1" class="value">
              <div class="slider">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script src="http://code.jquery.com/jquery-1.9.1.js">
</script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js">
</script>

Preparation code output

1. Gauge Scale - Slider Top
2. Gauge Scale - Slider Right
3. Gauge Scale - Slider Bottom
4. Gauge Scale - Slider Left
5. Grades Five Point Scale - Slider Top
6. Grades Five Point Scale - Slider Right
7. Grades Five Point Scale - Slider Bottom
8. Grades Five Point Scale - Slider Left
9. Grades Thirteen Point Scale - Slider Top
10. Grades Thirteen Point Scale - Slider Right
11. Grades Thirteen Point Scale - Slider Bottom
12. Grades Thirteen Point Scale - Slider Left
13. Smiley Face Five Point Scale - Slider Top
13. Smiley Face Five Point Scale - Slider Right
13. Smiley Face Five Point Scale - Slider Bottom
14. Smiley Face Five Point Scale - Slider Bottom
15. Stop Light Three Point Scale - Slider Top
16. Stop Light Three Point Scale - Slider Right
17. Stop Light Three Point Scale - Slider Bottom
18. Stop Light Three Point Scale - Slider Left
19. Bar - Five Point Scale
20. Bar - Seven Point Scale
21. Bar - Nine Point Scale

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
Slider 1
$(document).ready(function() {
  if ($('div.interactive').length > 0) {
    function slider() {
      $('div.interactive').each(function enhanceSlider(index) {
        var $this = $(this),
            value = $this.find('input.value').val(),
            defaultValue = $this.data('default-value'),
            type = $this.data('question-type'),
            orientation = $this.data('slider-orientation'),
            position = $this.data('slider-position');

        function ticks(min, max, orientation) {
          var label1 = $this.data('label1'),
              label2 = $this.data('label2'),
              label3 = $this.data('label3');

          $this.find('div.slider').prepend('<ul class="tm-container" />');

          if (orientation == 'vertical') {
            for (i = 0; i < max; i++) {
              var vindex = (i - max) * -1,
                  top = ((100) / (max - 1)) * i;

              $this.find('ul.tm-container').append('<li class="tm"><span class="tm-number">' + vindex + '</span></li>');

              $this.find('ul.tm-container li').eq(i).css('top', top + '%');

              if (i == 0) {
                $this.find('ul.tm-container li').eq(i).css('border', 'none').append('<span class="tm-caption tm-caption-1">' + label1 + '</span>');
              } else if (i == max - 1) {
                $this.find('ul.tm-container li').eq(i).css('border', 'none').append('<span class="tm-caption tm-caption-3">' + label3 + '</span>');
              }
            }
          } else {

          }
        };

        switch (type) {
        case 'gauge':
          $this.find('div.slider').slider({
            min: 0,
            max: 10,
            range: 'min',
            value: value,
            orientation: orientation,
            animate: 'fast',
            create: function initGauge(event, ui) {
              if (value > -1) {
                $this.removeClass('inactive').addClass('active').find('div.display').css({
                  'background-position': (value * 200 + 200) * (-1) + 'px 0px'
                });
              } else {
                $(this).slider("option", "value", defaultValue);
                $this.find('div.slider-status').css('width', defaultValue * -10 + '%');
              }
            },
            start: function(event, ui) {
              $this.removeClass('inactive').addClass('active');
              $this.find('input.value').val(ui.value);
              $this.find('div.display').css({
                'background-position': (ui.value * 200 + 200) * (-1) + 'px 0px'
              });
            },
            slide: function(event, ui) {
              $this.find('input.value').val(ui.value);
              $this.find('div.display').css({
                'background-position': (ui.value * 200 + 200) * (-1) + 'px 0px'
              });
            }
          });
          break;

        case 'five-pt-grade':
          $this.find('div.slider').slider({
            min: 1,
            max: 5,
            range: 'min',
            value: value,
            orientation: orientation,
            create: function initFiveGrades(event, ui) {
              if (value > -1 && orientation == 'horizontal') {
                $this.removeClass('inactive').addClass('active');
                $this.find('div.display').css({
                  'background-position': (value * -200) + 'px 0px'
                });
              } else if (value > -1 && orientation == 'vertical') {
                $this.removeClass('inactive').addClass('active');
                $this.find('div.display').css({
                  'background-position': (value * -200 + 1200) * (-1) + 'px 0px'
                });
              } else {
                $(this).slider("option", "value", defaultValue);
              }
            },
            start: function(event, ui) {
              $this.removeClass('inactive').addClass('active');
              $this.find('input.value').val(ui.value);
              if (orientation == 'horizontal') {
                $this.find('div.display').css({
                  'background-position': (ui.value * -200) + 'px 0px'
                });
              } else {
                $this.find('div.display').css({
                  'background-position': (ui.value * -200 + 1200) * (-1) + 'px 0px'
                });
              }
            },
            slide: function(event, ui) {
              $this.find('input.value').val(ui.value);
              if (orientation == 'horizontal') {
                $this.find('div.display').css({
                  'background-position': (ui.value * -200) + 'px 0px'
                });
              } else {
                $this.find('div.display').css({
                  'background-position': (ui.value * -200 + 1200) * (-1) + 'px 0px'
                });
              }
            }
          });
          break;

        case 'thirteen-pt-grade':
          $this.find('div.slider').slider({
            min: 1,
            max: 13,
            range: 'min',
            value: value,
            orientation: orientation,
            create: function initThirteenGrades(event, ui) {
              if (value > -1 && orientation == 'horizontal') {
                $this.removeClass('inactive').addClass('active');
                $this.find('div.display').css({
                  'background-position': (value * -200) + 'px 0px'
                });
              } else if (value > -1 && orientation == 'vertical') {
                $this.removeClass('inactive').addClass('active');
                $this.find('div.display').css({
                  'background-position': (value * -200 + 2800) * (-1) + 'px 0px'
                });
              } else {
                $(this).slider("option", "value", defaultValue);
              }

            },
            start: function(event, ui) {
              $this.removeClass('inactive').addClass('active');
              $this.find('input.value').val(ui.value);
              if (orientation == 'horizontal') {
                $this.find('div.display').css({
                  'background-position': (ui.value * -200) + 'px 0px'
                });
              } else {
                $this.find('div.display').css({
                  'background-position': (ui.value * -200 + 2800) * (-1) + 'px 0px'
                });
              }
            },
            slide: function(event, ui) {
              $this.find('input.value').val(ui.value);
              if (orientation == 'horizontal') {
                $this.find('div.display').css({
                  'background-position': (ui.value * -200) + 'px 0px'
                });
              } else {
                $this.find('div.display').css({
                  'background-position': (ui.value * -200 + 2800) * (-1) + 'px 0px'
                });
              }

            }
          });
          break;

        case 'smiley-face':
          $this.find('div.slider').slider({
            min: 1,
            max: 5,
            range: 'min',
            value: value,
            orientation: orientation,
            create: function initSmileyFace(event, ui) {
              if (value > -1) {
                $this.removeClass('inactive').addClass('active');
                $this.find('div.display').css({
                  'background-position': (value * -200) + 'px 0px'
                });
              } else {
                $(this).slider("option", "value", defaultValue);
              }

            },
            start: function(event, ui) {
              $this.removeClass('inactive').addClass('active');
              $this.find('input.value').val(ui.value);
              $this.find('div.display').css({
                'background-position': (ui.value * -200) + 'px 0px'
              });
            },
            slide: function(event, ui) {
              $this.find('input.value').val(ui.value);
              $this.find('div.display').css({
                'background-position': (ui.value * -200) + 'px 0px'
              });

            }
          });
          break;

        case 'stop-light':
          $this.find('div.slider').slider({
            min: 1,
            max: 3,
            range: 'min',
            value: value,
            orientation: orientation,
            create: function initStopLight(event, ui) {
              if (value > -1) {
                $this.removeClass('inactive').addClass('active');
                $this.find('div.display').css({
                  'background-position': (value * -200) + 'px 0px'
                });
              } else {
                $(this).slider("option", "value", defaultValue);
              }

            },
            start: function(event, ui) {
              $this.removeClass('inactive').addClass('active');
              $this.find('input.value').val(ui.value);
              $this.find('div.display').css({
                'background-position': (ui.value * -200) + 'px 0px'
              });
            },
            slide: function(event, ui) {
              $this.find('input.value').val(ui.value);
              $this.find('div.display').css({
                'background-position': (ui.value * -200) + 'px 0px'
              });

            }
          });
          break;

        case 'bar-scale':
          var min = $this.data('min'),
              max = $this.data('max');

          $this.find('div.slider').slider({
            min: min,
            max: max,
            range: 'max',
            value: value,
            orientation: orientation,
            create: function initBarScale(event, ui) {
              ticks(min, max, orientation); // generate tick marks
              if (value > -1) {
                $this.removeClass('inactive').addClass('active');
              } else {
                $(this).slider("option", "value", defaultValue);
              }
            }
          });
          break;
        case 'net-promoter':
          var labelleft = $this.data('left-label'),
              labelmiddle = $this.data('middle-label'),
              labelright = $this.data('right-label');

          $this.find('div.slider').slider({
            min: 0,
            max: 10,
            range: 'min',
            value: value,
            orientation: orientation,
            create: function initNetPromoter(event, ui) {
              ticks(orientation);
              $this.find('li.tick-mark.first').append('<span class="caption">' + labelleft + '</span>');
              $this.find('li.tick-mark:nth-child(6)').append('<span class="caption">' + labelmiddle + '</span>');
              $this.find('li.tick-mark.last').append('<span class="caption">' + labelright + '</span>');
            },
            start: function(event, ui) {
              $this.find('input.value').val(ui.value);
              $this.removeClass('inactive').addClass('active');
            },
            slide: function(event, ui) {
              $this.find('input.value').val(ui.value);
            }
          });
          break;
        }
      });
    }
    slider();
  }
});
pending…
Slider 2
$(document).ready(function() {
  if ($('div.interactive').length > 0) {
    function slider() {
      $('div.interactive').each(function enhanceSlider(index) {
        var $this = $(this),
            value = $this.find('input.value').val(),
            defaultValue = $this.data('default-value'),
            type = $this.data('question-type'),
            orientation = $this.data('slider-orientation'),
            position = $this.data('slider-position');

        function ticks(min, max, orientation) {
          var label1 = $this.data('label1'),
              label2 = $this.data('label2'),
              label3 = $this.data('label3');

          $this.find('div.slider').prepend('<ul class="tm-container" />');

          if (orientation == 'vertical') {
            for (i = 0; i < max; i++) {
              var vindex = (i - max) * -1,
                  top = ((100) / (max - 1)) * i;

              $this.find('ul.tm-container').append('<li class="tm"><span class="tm-number">' + vindex + '</span></li>');

              $this.find('ul.tm-container li').eq(i).css('top', top + '%');

              if (i == 0) {
                $this.find('ul.tm-container li').eq(i).css('border', 'none').append('<span class="tm-caption tm-caption-1">' + label1 + '</span>');
              } else if (i == max - 1) {
                $this.find('ul.tm-container li').eq(i).css('border', 'none').append('<span class="tm-caption tm-caption-3">' + label3 + '</span>');
              }
            }
          } else {

          }
        };

        switch (type) {
        case 'gauge':
          $this.find('div.slider').slider({
            min: 0,
            max: 10,
            range: 'min',
            value: value,
            orientation: orientation,
            animate: 'fast',
            create: function initGauge(event, ui) {
              if (value > -1) {
                $this.removeClass('inactive').addClass('active').find('div.display').css({
                  'background-position': (value * 200 + 200) * (-1) + 'px 0px'
                });
              } else {
                $(this).slider("option", "value", defaultValue);
                $this.find('div.slider-status').css('width', defaultValue * -10 + '%');
              }
            },
            start: function(event, ui) {
              $this.removeClass('inactive').addClass('active');
              $this.find('input.value').val(ui.value);
              $this.find('div.display').css({
                'background-position': (ui.value * 200 + 200) * (-1) + 'px 0px'
              });
            },
            slide: function(event, ui) {
              $this.find('input.value').val(ui.value);
              $this.find('div.display').css({
                'background-position': (ui.value * 200 + 200) * (-1) + 'px 0px'
              });
            }
          });
          break;

        case 'five-pt-grade':
          $this.find('div.slider').slider({
            min: 1,
            max: 5,
            range: 'min',
            value: value,
            orientation: orientation,
            create: function initFiveGrades(event, ui) {
              if (value > -1 && orientation == 'horizontal') {
                $this.removeClass('inactive').addClass('active');
                $this.find('div.display').css({
                  'background-position': (value * -200) + 'px 0px'
                });
              } else if (value > -1 && orientation == 'vertical') {
                $this.removeClass('inactive').addClass('active');
                $this.find('div.display').css({
                  'background-position': (value * -200 + 1200) * (-1) + 'px 0px'
                });
              } else {
                $(this).slider("option", "value", defaultValue);
              }
            },
            start: function(event, ui) {
              $this.removeClass('inactive').addClass('active');
              $this.find('input.value').val(ui.value);
              if (orientation == 'horizontal') {
                $this.find('div.display').css({
                  'background-position': (ui.value * -200) + 'px 0px'
                });
              } else {
                $this.find('div.display').css({
                  'background-position': (ui.value * -200 + 1200) * (-1) + 'px 0px'
                });
              }
            },
            slide: function(event, ui) {
              $this.find('input.value').val(ui.value);
              if (orientation == 'horizontal') {
                $this.find('div.display').css({
                  'background-position': (ui.value * -200) + 'px 0px'
                });
              } else {
                $this.find('div.display').css({
                  'background-position': (ui.value * -200 + 1200) * (-1) + 'px 0px'
                });
              }
            }
          });
          break;

        case 'thirteen-pt-grade':
          $this.find('div.slider').slider({
            min: 1,
            max: 13,
            range: 'min',
            value: value,
            orientation: orientation,
            create: function initThirteenGrades(event, ui) {
              if (value > -1 && orientation == 'horizontal') {
                $this.removeClass('inactive').addClass('active');
                $this.find('div.display').css({
                  'background-position': (value * -200) + 'px 0px'
                });
              } else if (value > -1 && orientation == 'vertical') {
                $this.removeClass('inactive').addClass('active');
                $this.find('div.display').css({
                  'background-position': (value * -200 + 2800) * (-1) + 'px 0px'
                });
              } else {
                $(this).slider("option", "value", defaultValue);
              }

            },
            start: function(event, ui) {
              $this.removeClass('inactive').addClass('active');
              $this.find('input.value').val(ui.value);
              if (orientation == 'horizontal') {
                $this.find('div.display').css({
                  'background-position': (ui.value * -200) + 'px 0px'
                });
              } else {
                $this.find('div.display').css({
                  'background-position': (ui.value * -200 + 2800) * (-1) + 'px 0px'
                });
              }
            },
            slide: function(event, ui) {
              $this.find('input.value').val(ui.value);
              if (orientation == 'horizontal') {
                $this.find('div.display').css({
                  'background-position': (ui.value * -200) + 'px 0px'
                });
              } else {
                $this.find('div.display').css({
                  'background-position': (ui.value * -200 + 2800) * (-1) + 'px 0px'
                });
              }

            }
          });
          break;

        case 'smiley-face':
          $this.find('div.slider').slider({
            min: 1,
            max: 5,
            range: 'min',
            value: value,
            orientation: orientation,
            create: function initSmileyFace(event, ui) {
              if (value > -1) {
                $this.removeClass('inactive').addClass('active');
                $this.find('div.display').css({
                  'background-position': (value * -200) + 'px 0px'
                });
              } else {
                $(this).slider("option", "value", defaultValue);
              }

            },
            start: function(event, ui) {
              $this.removeClass('inactive').addClass('active');
              $this.find('input.value').val(ui.value);
              $this.find('div.display').css({
                'background-position': (ui.value * -200) + 'px 0px'
              });
            },
            slide: function(event, ui) {
              $this.find('input.value').val(ui.value);
              $this.find('div.display').css({
                'background-position': (ui.value * -200) + 'px 0px'
              });

            }
          });
          break;

        case 'stop-light':
          $this.find('div.slider').slider({
            min: 1,
            max: 3,
            range: 'min',
            value: value,
            orientation: orientation,
            create: function initStopLight(event, ui) {
              if (value > -1) {
                $this.removeClass('inactive').addClass('active');
                $this.find('div.display').css({
                  'background-position': (value * -200) + 'px 0px'
                });
              } else {
                $(this).slider("option", "value", defaultValue);
              }

            },
            start: function(event, ui) {
              $this.removeClass('inactive').addClass('active');
              $this.find('input.value').val(ui.value);
              $this.find('div.display').css({
                'background-position': (ui.value * -200) + 'px 0px'
              });
            },
            slide: function(event, ui) {
              $this.find('input.value').val(ui.value);
              $this.find('div.display').css({
                'background-position': (ui.value * -200) + 'px 0px'
              });

            }
          });
          break;

        case 'bar-scale':
          var min = $this.data('min'),
              max = $this.data('max');

          $this.find('div.slider').slider({
            min: min,
            max: max,
            range: 'max',
            value: value,
            orientation: orientation,
            create: function initBarScale(event, ui) {
              ticks(min, max, orientation); // generate tick marks
              if (value > -1) {
                $this.removeClass('inactive').addClass('active');
              } else {
                $(this).slider("option", "value", defaultValue);
              }
            }
          });
          break;
        case 'net-promoter':
          var labelleft = $this.data('left-label'),
              labelmiddle = $this.data('middle-label'),
              labelright = $this.data('right-label');

          $this.find('div.slider').slider({
            min: 0,
            max: 10,
            range: 'min',
            value: value,
            orientation: orientation,
            create: function initNetPromoter(event, ui) {
              ticks(orientation);
              $this.find('li.tick-mark.first').append('<span class="caption">' + labelleft + '</span>');
              $this.find('li.tick-mark:nth-child(6)').append('<span class="caption">' + labelmiddle + '</span>');
              $this.find('li.tick-mark.last').append('<span class="caption">' + labelright + '</span>');
            },
            start: function(event, ui) {
              $this.find('input.value').val(ui.value);
              $this.removeClass('inactive').addClass('active');
            },
            slide: function(event, ui) {
              $this.find('input.value').val(ui.value);
            }
          });
          break;
        }
      });
    }
    slider();
  }
});
pending…

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

Compare results of other browsers

0 comments

Add a comment