alphanumeric range slider in jquery

Question

I am trying to create a simple range slider for alphanumeric characters (example AAA12, AAB11, BA21, BC33, FG34), but no success.

I am using the https://jqueryui.com/slider/#range-vertical but looks like there is no support for alphanumeric.

Here is the fiddler: https://jsfiddle.net/99x50s2s/66/

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.

Answer 1

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: 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/