jquery中的字母数字范围滑块答案

【问题标题】：alphanumeric range slider in jqueryjquery中的字母数字范围滑块
【发布时间】：2015-06-17 15:18:52
【问题描述】：

我正在尝试为字母数字字符（例如 AAA12、AAB11、BA21、BC33、FG34）创建一个简单的范围滑块，但没有成功。

我正在使用https://jqueryui.com/slider/#range-vertical，但似乎不支持字母数字。

这里是提琴手：https://jsfiddle.net/99x50s2s/66/

$( "#slider-range" ).slider({
      orientation: "vertical",
      range: true,
      values: [ 17, 67 ],
      slide: function( event, ui ) {
        $( "#codes" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
      }
    });
    $( "#codes" ).val($( "#slider-range" ).slider( "values", 0 ) +
      " - " + $( "#slider-range" ).slider( "values", 1 ) );

当我尝试在滑块值中设置字母数字字符时，它根本没有呈现。

问题：

如何启用范围滑块以支持字母数字字符？任何帮助表示赞赏。

【问题讨论】：

这可能对你有帮助：stackoverflow.com/questions/11339601/…
@WaKai，感谢您的链接。

标签： javascript jquery jquery-ui

【解决方案1】：

我做过类似的事情。我将值放入一个数组中，然后使用滑块作为数组索引。有点像这样：

var arrCodes = [
    'AAA12',
    'AAB11',
    'BA21'
];

然后您可以像这样在滑块上设置min 和max 值：

min: 0,
max: arrCodes.length - 1

然后，当您想知道滑块中选择的值时：

slide: function(event, ui) {
    console.log('Min: ' + arrCodes[ui.values[0]]);
    console.log('Max: ' + arrCodes[ui.values[1]]);
}

我已经更新了你的 JSFiddle：https://jsfiddle.net/99x50s2s/67/

【讨论】：