jQuery UI 带字母的范围滑块

Question

我有一个 jQuery UI 范围滑块，如下所示，工作正常（几乎是 jQuery API 示例的复制和粘贴：

//Price range slider
$(function() {
    $( "#slider-range-price" ).slider({
        range: true,
        min: 300,
        max: 18499,
        values: [300,18499],
        slide: function( event, ui ) {
            $( "#amount-price" ).val( "£" + ui.values[ 0 ] + " - £" + ui.values[ 1 ] );
        }
    });
    $( "#amount-price" ).val( "£" + $( "#slider-range-price" ).slider( "values", 0 ) +
    " - £" + $( "#slider-range-price" ).slider( "values", 1 ) );
});

但是现在我需要第二个，但这次我需要它来处理字母而不是整数。因此，我需要最小值：'A' 和最大值：'Z'，以便范围是字母表中的 2 个字母。但我一直无法找到滑块的整数或浮点数以外的任何东西。任何帮助表示赞赏 - 请记住我已经做了很多网络开发，但对 jQuery.

还是个新手

Answer 1

您可以使用 min 和 max 值，它们分别等于 A 和 Z 的 ASCII 键码，然后在 slide 事件来显示它们。试试这个：

$("#slider").slider({
  min: 65,
  max: 90,
  slide: function(event, ui) {
    $('#display').text(String.fromCharCode(ui.value));
  }
});

body {
  margin: 20px;
}

#display {
  margin: 20px 0 0;
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/black-tie/jquery-ui.css" />
<div id="slider"></div>
<div id="display"></div>

或者，如果您需要发送到服务器的值介于1和26之间，您可以修改slide函数中的ASCII码：

$("#slider").slider({
    min: 1,
    max: 26,
    slide: function( event, ui ) {
        $('#display').text(String.fromCharCode(ui.value + 64));
    }
});

Answer 2

我建议为此使用一个数组，它将整数值映射到字母表中的字母。

var alph = ["A", "B", "C", ..., "Z"];

所以用户范围在 0 到 25 之间。然后显示数组中与所选整数对应的字母。例如：alph[2] // C

var alph = ["A", "B", "C", ..., "Z"];
$("#slider").slider({
  min: 0, // A
  max: 25, // Z
  slide: function( event, ui ) {
    $('#display').text(alph[ui.value]);
  }
 });

Answer 3

已经有两个好的解决方案，这里是第三个替代方案：使用 Number.toString() 以 36 为底，并将最小值和最大值限制在 A 和 Z 之间：

$( "#slider-range-price" ).slider({
    range: true,
    min: 10,
    max: 35,
    values: [ 20, 26 ],
    slide: function( event, ui ) {
        $( "#amount-price" ).val( ui.values[ 0 ].toString(36) + " - " +
                                  ui.values[ 1 ].toString(36) );
    }
});

Here's a fiddle link

jQuery UI 带字母的范围滑块

jQuery UI range slider with letters

javascript

jquery

jquery-ui

jquery-ui-slider