基本的に、以下に表示されるui-slider ucasポイントとグレードは「ライブ」ではないため、ここでいくつかの問題が発生します。たとえば、スライダーを使用するときにそれらを表示したいとします。したがって、すべての計算はすぐに実行されるため、スライドすると、ユーザーが停止したときではなく、計算が変化します。
また、バーが上に移動すると、スライドしたビットが特定の色に変わるように、バーのスタイリングをどのように行いますか。
ライブバージョンの場合:http://universitycompare.com
スライダーのjQueryは以下のとおりです。
jQuery(document).ready(function($) {
var slider1 = $("#slider").slider({
max: 420,
min: 0,
step: 20,
change: function(event, ui) {
$("#s2").html(ui.value);
$("#s2")
},
stop:Calculate
});
var slider2 = $("#slider2").slider({
max: 420,
min: 0,
step: 20,
change: function(event, ui) {
$("#s3").html(ui.value);
$("#s3")
},
stop:Calculate
});
var div = $('#s4'); //cache this object in a variable if you'll be using it multiple times
slide: function Calculate(){
var val1 = slider1.slider('option', 'value');
var val2 = slider2.slider('option', 'value');
var finalVal = (val1 + val2) / 2;
//update the ui
if (finalVal === 0) { //replace 220 with whatever you're checking
//if finalVal does equal 220
div.text('N / A');
}
if (finalVal === 20) { //replace 220 with whatever you're checking
//if finalVal does equal 220
div.text('N / A');
}
if (finalVal === 40) { //replace 220 with whatever you're checking
//if finalVal does equal 220
div.text('N / A');
}
if (finalVal === 60) { //replace 220 with whatever you're checking
//if finalVal does equal 220
div.text('N / A');
}
if (finalVal === 80) { //replace 220 with whatever you're checking
//if finalVal does equal 220
div.text('N / A');
}
if (finalVal === 100) { //replace 220 with whatever you're checking
//if finalVal does equal 220
div.text('N / A');
}
if (finalVal === 120) { //replace 220 with whatever you're checking
//if finalVal does equal 220
div.text('EEE');
}
if (finalVal === 140) { //replace 220 with whatever you're checking
//if finalVal does equal 220
div.text('DEE');
}
if (finalVal === 160) { //replace 220 with whatever you're checking
//if finalVal does equal 220
div.text('DDE');
}
if (finalVal === 180) { //replace 220 with whatever you're checking
//if finalVal does equal 220
div.text('DDD');
}
if (finalVal === 200) { //replace 220 with whatever you're checking
//if finalVal does equal 220
div.text('CDD');
}
if (finalVal === 220) { //replace 220 with whatever you're checking
//if finalVal does equal 220
div.text('CCD');
}
if (finalVal === 240) { //replace 220 with whatever you're checking
//if finalVal does equal 220
div.text('CCC');
}
if (finalVal === 260) { //replace 220 with whatever you're checking
//if finalVal does equal 220
div.text('BCC');
}
if (finalVal === 280) { //replace 220 with whatever you're checking
//if finalVal does equal 220
div.text('BBC');
}
if (finalVal === 300) { //replace 220 with whatever you're checking
//if finalVal does equal 220
div.text('BBB');
}
if (finalVal === 320) { //replace 220 with whatever you're checking
//if finalVal does equal 220
div.text('ABB');
}
if (finalVal === 340) { //replace 220 with whatever you're checking
//if finalVal does equal 220
div.text('AAB');
}
if (finalVal === 360) { //replace 220 with whatever you're checking
//if finalVal does equal 220
div.text('AAA');
}
if (finalVal === 380) { //replace 220 with whatever you're checking
//if finalVal does equal 220
div.text('A*AA');
}
if (finalVal === 400) { //replace 220 with whatever you're checking
//if finalVal does equal 220
div.text('A*A*A');
}
if (finalVal === 420) { //replace 220 with whatever you're checking
//if finalVal does equal 220
div.text('A*A*A*');
}
}
});
スライダーのCSSもここにありますが、色が変わっていないようです。
/* Slider
----------------------------------*/
.ui-slider { position: relative; text-align: left; background-color:#ffdd4e; height:7px; }
.ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.2em; height: 1.2em; cursor: default; }
.ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; background-position: 0 0; }
.ui-slider-horizontal { height: 7px; }
.ui-slider-horizontal .ui-slider-handle { top: -.5em; margin-left: -.6em; background-color:#ffdd4e; }
.ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; }
.ui-slider-horizontal .ui-slider-range-min { left: 0; }
.ui-slider-horizontal .ui-slider-range-max { right: 0; }
.ui-widget-header { background-color:#0071bc !important; height:8px !important; left:1px !important; top:1px !important; position:absolute !important; }