如何做指数滑块价格范围jQuery UI答案

【问题标题】：How to do expontential slider price range jquery UI如何做指数滑块价格范围jQuery UI
【发布时间】：2014-07-25 03:39:48
【问题描述】：

我在这里找到了这个滑块代码：

http://codepen.io/ignaty/pen/EruAe

function collision($div1, $div2) {
      var x1 = $div1.offset().left;
      var w1 = 40;
      var r1 = x1 + w1;
      var x2 = $div2.offset().left;
      var w2 = 40;
      var r2 = x2 + w2;

      if (r1 < x2 || x1 > r2) return false;
      return true;

    }

// // slider call

$('#slider').slider({
    range: true,
    min: 0,
    max: 500,
    values: [ 75, 300 ],
    slide: function(event, ui) {

        $('.ui-slider-handle:eq(0) .price-range-min').html('$' + ui.values[ 0 ]);
        $('.ui-slider-handle:eq(1) .price-range-max').html('$' + ui.values[ 1 ]);
        $('.price-range-both').html('<i>$' + ui.values[ 0 ] + ' - </i>$' + ui.values[ 1 ] );

        //

    if ( ui.values[0] == ui.values[1] ) {
      $('.price-range-both i').css('display', 'none');
    } else {
      $('.price-range-both i').css('display', 'inline');
    }

        //

        if (collision($('.price-range-min'), $('.price-range-max')) == true) {
            $('.price-range-min, .price-range-max').css('opacity', '0');    
            $('.price-range-both').css('display', 'block');     
        } else {
            $('.price-range-min, .price-range-max').css('opacity', '1');    
            $('.price-range-both').css('display', 'none');      
        }

    }
});

$('.ui-slider-range').append('<span class="price-range-both value"><i>$' + $('#slider').slider('values', 0 ) + ' - </i>' + $('#slider').slider('values', 1 ) + '</span>');

$('.ui-slider-handle:eq(0)').append('<span class="price-range-min value">$' + $('#slider').slider('values', 0 ) + '</span>');

$('.ui-slider-handle:eq(1)').append('<span class="price-range-max value">$' + $('#slider').slider('values', 1 ) + '</span>');

我希望有一个选项来更改指数，例如跳过 100 或任何其他指数。

我应该添加什么代码才能让它以这种方式工作？提前谢谢你！

【问题讨论】：

您在滑块插件 API 中看到 step 选项 jqueryui.com/slider/#steps 了吗？
哦，是的！我没看到！知道了！谢谢！ :) 请务必回答。

标签： jquery jquery-ui uislider jquery-ui-slider

【解决方案1】：

请查看滑块插件 API 中的 step 选项 jqueryui.com/slider/#steps。插件文档说：

step option determines the size or amount of each interval or step the slider takes between the min and max. The full specified value range of the slider (max - min) should be evenly divisible by the step.

Code examples:
$( ".selector" ).slider({ step: 5 });

【讨论】：

【解决方案2】：

注意：我的代码有问题！而且我想不出解决办法。

这些值实际上并没有平方，只是打印的数字。如果我能找到一种方法让它在加载时看起来正确，我会说在保存并称之为好之前通过指数函数运行这些值。不是一个很好的解决方案，抱歉！

这里是一个更新的小提琴，其中包含 ~~应该让你得到你想要的~~会让你完成一半但只是表面上的变化：http://codepen.io/anon/pen/JgCyo

我做了什么：

在.slide 处理程序中，我对每个值进行平方。您可以在此处放置所需的任何指数函数，其中未知数分别为 ui.values[0] 和 ui.values[1]。
```
// lines 23-24
ui.values[0] = ui.values[0] * ui.values[0];
ui.values[1] = ui.values[1] * ui.values[1];
```
既然数字如此之大，我需要增加它们的命中框，以免它们重叠。为此，我只是将collision 函数中的“软糖”值加倍。您必须找到适合您应用的值。
```
  var w1 = 80; // Line 3
```
和
```
  var w2 = 80; // Line 6
```

【讨论】：

【解决方案3】：

试试this笔。

滑块在技术上仍然是线性的，但它以指数方式显示价格。

此函数获取当前值，并将其更改为适合抛物线。

function calcValue(value) {
  var a=.005;
  var b=1;
  var c=0;
  return (a*value*value + b*value + c).toFixed(0);
};

【讨论】：