Question

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

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或任何其他指数。

我应该添加哪些代码才能使其正常工作？先谢谢你了！

Answer 1

注意：我的代码存在问题！我无法找到解决办法。

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

这里有一个更新的小提琴，其中~~可以让你获得你想要的东西~~会让你大约一半，但只是在表面上：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];
```
既然数字太大了，我需要增加它们的命中箱，这样它们就不会重叠了。要做到这一点，我只是加倍了＆＃34;软糖＆＃34; collision函数中的值。您必须找到适合您应用的值。
```
  var w1 = 80; // Line 3
```
和
```
  var w2 = 80; // Line 6
```

Answer 2

请查看滑块插件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 });

Answer 3

试试this笔。

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

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

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

如何做指数滑块价格范围jquery UI

3 个答案:

注意：我的代码存在问题！我无法找到解决办法。