Showing min-max range on a 1-5 scale

so i have a scale of 1-5 which i then want to indicate what the records from the database achieve on the scale. I’ll be doing a query to get the lowest number and the highest number.

My maths isn’t great but i think there are about 20 or so combinations as the min-max could be 1-2, 1-3, 1-4…2-2,2-3 etc

If there were less i’d prob just create gif and use PHP switch to change depending on the values, but is there a better way?

I am thinking of trying to use CSS and normal symbols to create blocks separated by {} to show the range ( i can’t do divs on here so you’ll have to imagine green - red boxes around each number)

e.g 1 2 { 3 4 } 5

I can’t think how to get the brackets in the correct places without specifying for each possible combination. Is there a clever coding way of doing this, my brain is fried today so sorry if its a dead simple answer i am not seeing.


You don’t need to know the combinations if you just want {} around the range. You just need to know the first and last numbers.

If you’re loading the results via ajax or something, you’ll need javascript to set the styles but here’s an example doing it with css.

#range_1:before{content: "{";}
#range_3:after {content: "}";}

<span id="range_1">1</span>
<span id="range_2">2</span>
<span id="range_3">3</span>
<span id="range_4">4</span>
<span id="range_5">5</span>

If instead the entire page is sent from the server on each request, just output the characters in the proper place as you spit out the numbers.

Cool thanks for the reply. I’ll have a bit of a play but it looks like that could well do what i need thanks.

I’ll re-post once i’ve got a working example with php/mysql incase anyone else wants to know.