jQuery UI range slider with letters

Question

I have a jQuery UI Range slider like below working fine (pretty much a copy and paste from the jQuery API examples:

//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 ) );
});

However now i need a second one, but this time i need it to handles letters instead of integers. As such i need the min: 'A' and the max :'Z', so that the range is 2 letters of the alphabet. But i have been unable to find anything other than integers or floats for sliders. Any help appreciated - bearing in mind i have done a lot of web-dev, but am pretty new to jQuery.

Answer 1

You can use min and max values which equate to the ASCII keycodes for A and Z respectively, then use String.fromCharCode() in the slide event to display them. Try this:

 $("#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>

Alternatively, if you need the values sent to the server to be between 1 and 26 , you can amend the ASCII code within the slide func:

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

Answer 2

I would suggest using an array for that, which maps integer values to letters in the alphabet.

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

So user ranges between 0 to 25. Then you display the letter from the array which corresponds to the selected integer. For example: 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

There's two good solutions already, and here's a third alternative: use Number.toString() with base 36, and restrict the min and max values to between A and 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