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.

Rory McCrossan · Accepted Answer · 2021-01-27T09:00:07.903

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

score 1 · Answer 2 · answered Mar 02 '15 at 13:53

1

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

answered Mar 02 '15 at 13:53

Timur Osadchiy

5,699
2
26
28

Can't believe i didn't think of this simple solution. although i think i prefer the ASCII one below because it avoids creating an array of letter each time - but good workaround all the same – Louis M. Mar 02 '15 at 13:56

score 0 · Answer 3 · answered Mar 02 '15 at 14:04

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

jQuery UI range slider with letters

3 Answers3