Working range

by Alin Guta

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<hr>
<input class="ui-hidden-accessible" type="range" name="rangeInput" id="rangeInput" value="0" min="0" max="46" onchange="updateTextInput(this.value);" />

<ul class="output">
    <li><span id="hex">&nbsp;</span>

    </li>
    <li><span id="dec">&nbsp;</span>

    </li>
    <li><span id="bin">&nbsp;</span>

    </li>
</ul>

CSS

UL.output{
     margin: auto;
     list-style: none;
    position:relative;
 }
UL.output LI {
     margin: 0;
     padding: 0;
     list-style: none;
     float: left;
 }
 UL.output {
     margin-top: 20px;
     margin-bottom: 20px;
 }
 UL.output LI {
     padding: 8px;
     display: inline;
     margin-right: 20px;
     background: #8FCB2F;
 }
 UL.output LI SPAN {
     color: #FFFFFF;
     font-weight: bold;
     font-size: 30px;
     display: block;
     text-align: center;
 }

/*range design*/
/*from structure*/
div.ui-slider {
	height: 60px;
	margin:40px 0 0 0;
	padding: 0;
	-ms-touch-action: pan-y pinch-zoom double-tap-zoom;
    font-size:50px;
    font-weight:normal;
}

.ui-slider-track {
	position: relative;
	overflow: visible;
	border-width: 1px;
	border-style: solid;
	height: 5px;
	margin: 0 35px 0 35px;
    font-size:50px;
}

/* High level of specificity to override button margins in grids */
.ui-slider-track .ui-btn.ui-slider-handle {
	position: absolute;
	z-index: 1;
	top:50%;
	width: 60px;
	height: 60px;
	margin: -32px 0 0 -32px;
	outline: 0;
    line-height:60px;
}
.ui-slider-inneroffset {
	margin: 0 16px;
	position: relative;
	z-index: 1;
}

/* Button visited */
html head + body .ui-btn.ui-btn-a:visited {
	background-color: 			#f6f6f6 /*{a-bup-background-color}*/;
	border-color:	 		#ddd /*{a-bup-border}*/;
	color: 					#333 /*{a-bup-color}*/;
	text-shadow: 0 /*{a-bup-shadow-x}*/ 1px /*{a-bup-shadow-y}*/ 0 /*{a-bup-shadow-radius}*/ #f3f3f3 /*{a-bup-shadow-color}*/;
}

JavaScript

var custom = ["0", "1", "2", "3", "4", "5", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"];
$("#rangeInput").prop({
    max: custom.length - 1
}).closest(".ui-slider")
    .find(".ui-slider-handle")
    .text(custom[0]);

$("#rangeInput").on("change", function () {
    var value = $(this).val(),
        button = $(this)
            .closest(".ui-slider")
            .find(".ui-slider-handle");
    setTimeout(function () {
        button.text(custom[value]);
    }, 10);
});

$(document).ready(function () {
    var convert = function (ch) {
        $('#hex').html(Convert.toHex(ch));
        $('#dec').html(Convert.toDec(ch));
        $('#bin').html(Convert.toBin(ch));
    }

        function appendInput() {
            $('#ch').append($('#pagenum').val());
        }

    $('#rangeInput').change(function (e) {
        var ch = this.value;
        convert(custom[ch]);
    });
});

var Convert = {
    chars: " !\"#$%&amp;'()*+'-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\\]^_`abcdefghijklmnopqrstuvwxyz{|}~",
    hex: '0123456789ABCDEF',
    bin: ['0000', '0001', '0010', '0011', '0100', '0101', '0110', '0111', '1000', '1001', '1010', '1011', '1100', '1101', '1110', '1111'],

    decToHex: function (d) {
        return (this.hex.charAt((d - d % 16) / 16) + this.hex.charAt(d % 16));
    },
    toBin: function (ch) {
        var d = this.toDec(ch);
        var l = this.hex.charAt(d % 16);
        var h = this.hex.charAt((d - d % 16) / 16);

        var hhex = "ABCDEF";
        var lown = l < 10 ? l : (10 + hhex.indexOf(l));
        var highn = h < 10 ? h : (10 + hhex.indexOf(h));
        return this.bin[highn] + ' ' + this.bin[lown];
    },
    toHex: function (ch) {
        return this.decToHex(this.toDec(ch));
    },
    toDec: function (ch) {
        var p = this.chars.indexOf(ch);
        return (p <= -1) ? 0 : (p + 32);
    }
};