function mousetime() {
change();
}
function changetime() {
var ctval = document.getElementById('coursetime').value;
var speed = (ctval > 0.000001) ? (Math.round(24.4 / ctval)) : -1;
var rides = (speed < 25) ? getRandomIntInclusive(1, 10) : 0;
document.getElementById('ridenum').innerHTML = (ctval > .0001 ? ((rides == 1) ? 'is 1 ride' : 'are ' + rides + ' rides') : 'no rides');
document.getElementById('comment').innerHTML = getMessage(speed);
change();
}
function change() {
var ctval = Math.round(document.getElementById('coursetime').value * 100)/100;
var speed = (ctval > 0.000001) ? (Math.round(24.4 / ctval)) : -1;
// display hours : min
var hours = Math.floor(ctval);
var min = ctval - hours;
document.getElementById('timeset').innerHTML = (hours ? (hours + (hours == 1 ? " hour " : " hours ")) : "") + (min ? Math.round(min * 60) + " min" : ( !hours && !min ? "0 min" : ""));
document.getElementById('speed').innerHTML = 'Crusing Speed: ' + (speed > 0 ? speed + ' mph' : 'Infinite!');
}
// ToDo: make this a jsonp service
function getMessage(speed) {
var rides = (speed < 25) ? getRandomIntInclusive(1, 6) : 0;
var messagedef = "There "+(rides == 1 ? "is" : "are")+" <strong id='ridenum'>" + rides + "</strong> <a href='/upcoming-rides' title='Click to view upcoming rides listing...'>upcoming "+(rides == 1 ? "ride" : "rides")+"</a> with this speed available to club members.";
var message = messagedef;
var speeds = [
{'speed': 31, 'text': "Typical speed of road-race cyclist"},
{'speed': 37, 'text': "Typical speed of thoroughbred racehorse or racing greyhound"},
{'speed': 55.2, 'text': "Barton Mawer, Solar powered bicycle speed record holder"},
{'speed': 83.13, 'text': "Sebastiaan Bowier, Human powered bicycle speed record holder"},
{'speed': 139.85, 'text': "Charles Burnett III, Steam powered speed record holder"},
{'speed': 167.044, 'text': "Fred Rompelberg, Paced bicycle speed record holder"},
{'speed': 307.66, 'text': "Roger Schroer, Electric powered speed record holder"},
{'speed': 481.629, 'text': "Don Vesco, Wheel driven speed record holder"},
{'speed': 763, 'text': "Land speed record"},
];
var n = speeds.length;
for (var i = 0; i < n; i++) {
if (speed > speeds[i].speed)
message = messagedef + "<br/><small>(<a class='wikipedia' target='_blank' title='Click to view Wikipedia page...' href='https://en.wikipedia.org/wiki/List_of_vehicle_speed_records'>" + speeds[i].text + "</a>: " + speeds[i].speed + " mph)</small>";
}
return speed > 0 ? message : "There are <strong id='ridenum'>0 rides</strong> with this speed available to club members.<br/><small>Warp speed captain! The Timetravelers SIG will meet last Tuesday.</small>";
}
// ToDo: Replace with ajax/jason call to service
// Returns a random integer between min (included) and max (included)
// Using Math.round() will give you a non-uniform distribution!
function getRandomIntInclusive(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
changetime();
<div class='block'>
<h2 class='block-title title'>Unsure which Ride to join?</h2>
<ul>
<li>Assess your cruising speed by timing yourself.</li>
<li>Time a four-lap ride of the complete oval in Central Park.</li>
<li>That's 24.4 miles total.</li>
<li>Ride at a comfortable, sustainable pace.</li>
<li>Fewer than four laps will give a false assessment.</li>
<li>Position your time on the slider below (1.5 hrs = 90 min).</li>
<li>Note the cruising speed.</li>
</ul>
<input id="coursetime" class='coursetime' type ="range" min ="0.0" max="3.0" step ="0.001" value='1.5' onchange='changetime();' onmousemove='mousetime();' />
<div id='range'><span id='timemin'>0</span><span id='timeset'></span><span id='timemax'>3</div>
<div class='results'>
<div id='comment'>There <strong id='ridenum'>6</strong> with this speed available to club members.</div>
<h2 id='time'></h1>
<h2 id='speed'></h1>
</div>
<ul>
<li>Pick a ride that matches your cruising speed.</li>
<li>It's that easy!</li>
<li>Most ride speeds are in the range of 10mph - 23mph.</li>
<li><a href='/join' title='Click to join and view upcoming rides listing...'>Click here to join or view rides.</a></li>
</ul>
</div>
.block {
background: #aaa url("http://apperceive.com/img/nycc-speed-calc.jpg"); /* https://www.flickr.com/photos/skinnylawyer/7174938930/ */
background-size: 100% 100%;
width: 480px;
margin: 0 auto;
border: solid thin gray;
padding: 10px;
color: #333;
}
#range {
width: 460px;
}
.coursetime {
width: 400px;
color: coursetime;
text-align: center;
}
#timeset,
#timemax,
#timemin {
display: inline-block;
width: 33%;
}
#timemax {
text-align: right;
}
#timeset,
.block-title,
.results {
text-align: center;
}
#comment {
padding-top: 25px;
font-style: italic;
}
.block a,
.block a:visited {
color: #111;
font-weight: bold;
}
.block a:hover {
color: #888;
}
.block a.wikipedia {
color: #333;
font-weight: normal;
}
input[type=range] {
-webkit-appearance: none;
width: 100%;
margin: 13.8px 0;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 8.4px;
cursor: pointer;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
background: #3071a9;
border-radius: 1.3px;
border: 0.2px solid #010101;
}
input[type=range]::-webkit-slider-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 1px solid #000000;
height: 36px;
width: 16px;
border-radius: 3px;
background: #ffffff;
cursor: pointer;
-webkit-appearance: none;
margin-top: -14px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #367ebd;
}
input[type=range]::-moz-range-track {
width: 100%;
height: 8.4px;
cursor: pointer;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
background: #3071a9;
border-radius: 1.3px;
border: 0.2px solid #010101;
}
input[type=range]::-moz-range-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 1px solid #000000;
height: 36px;
width: 16px;
border-radius: 3px;
background: #ffffff;
cursor: pointer;
}
input[type=range]::-ms-track {
width: 100%;
height: 8.4px;
cursor: pointer;
background: transparent;
border-color: transparent;
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: #2a6495;
border: 0.2px solid #010101;
border-radius: 2.6px;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
background: #3071a9;
border: 0.2px solid #010101;
border-radius: 2.6px;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 1px solid #000000;
height: 36px;
width: 16px;
border-radius: 3px;
background: #ffffff;
cursor: pointer;
height: 8.4px;
}
input[type=range]:focus::-ms-fill-lower {
background: #3071a9;
}
input[type=range]:focus::-ms-fill-upper {
background: #367ebd;
}
External resources loaded into this fiddle: