Logarithmic Slider

by Czechler

HTML

<input type="range" min="0" max="200000" value="0" />
<br />
<span></span>

JavaScript

// based on http://stackoverflow.com/questions/846221/logarithmic-slider
var i,
    input = $('input'),
    minp = parseInt(input.attr('min'), 10),
    maxp = parseInt(input.attr('max'), 10);

$('input').on('change', function (changeEvent) {
    var v = changeEvent.target.value,
        lv = parseInt(logValue(v), 10);

    if (lv < 72) {
        $('span').html(v + ' / ' + lv + '<br/>' + lv + ' hours');
    }
    else if (lv < 1440) {
        $('span').html(v + ' / ' + lv + '<br/>' + parseInt(v / 24, 10) + ' days');
    }
    else {
        $('span').html(v + ' / ' + lv + '<br/>' + parseInt(lv / 24 / 30, 10) + ' months');
    }
});

for (i = 0; i < 10; i++) {
    console.log(i, logValue(i));
}

function logValue(position) {
  var minv = Math.log(1);
  var maxv = Math.log(100000);

  // calculate adjustment factor
  var scale = (maxv-minv) / (maxp-minp);

  return Math.exp(minv + scale*(position-minp));
}