[英]alphanumeric range slider in jquery
I am trying to create a simple range slider for alphanumeric characters (example AAA12, AAB11, BA21, BC33, FG34), but no success. 我正在尝试为字母数字字符(例如AAA12,AAB11,BA21,BC33,FG34)创建一个简单的范围滑块,但没有成功。
I am using the https://jqueryui.com/slider/#range-vertical but looks like there is no support for alphanumeric. 我正在使用https://jqueryui.com/slider/#range-vertical,但似乎不支持字母数字。
Here is the fiddler: https://jsfiddle.net/99x50s2s/66/ 这是提琴手: https : //jsfiddle.net/99x50s2s/66/
JS JS
$( "#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 ) );
When I tried to set alphanumeric character in the slider values, it is not rendering at all. 当我尝试在滑块值中设置字母数字字符时,它根本没有呈现。
Question: 题:
How do I enable range slider to support alphanumeric characters? 如何启用范围滑块以支持字母数字字符? Any help is appreciated.
任何帮助表示赞赏。
I've done something similar. 我做了类似的事情。 I put the values into an array and then used the slider for the array index.
我将值放入数组,然后将滑块用于数组索引。 Sort of like so:
有点像这样:
var arrCodes = [
'AAA12',
'AAB11',
'BA21'
];
Then you can set the min
and max
values on the slider like so: 然后可以在滑块上设置
min
和max
,如下所示:
min: 0,
max: arrCodes.length - 1
Then when you want to know the values selected in your slider: 然后,当您想知道在滑块中选择的值时:
slide: function(event, ui) {
console.log('Min: ' + arrCodes[ui.values[0]]);
console.log('Max: ' + arrCodes[ui.values[1]]);
}
I've updated your JSFiddle: https://jsfiddle.net/99x50s2s/67/ 我已经更新了您的JSFiddle: https ://jsfiddle.net/99x50s2s/67/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.