代码1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<!--Plugin CSS file with desired skin-->
<link rel="stylesheet" href="./css/ion.rangeSlider.css" />
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/css/ion.rangeSlider.min.css"/> -->
<!--jQuery-->
<script src="./js/jquery-1.11.0.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> -->
<!--Plugin JavaScript file-->
<script src="./js/ion.rangeSlider.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/js/ion.rangeSlider.min.js"></script> -->
</head>
<body>
<input
id="r1"
type="text"
class="js-range-slider"
name="my_range"
value=""
/>
<script>
$(function () {
function my_prettify(n) {
var tip = "不及格";
if (n <= 0) {
tip = "不及格";
} else if (n <= 25) {
tip = "及格";
} else if (n < 50) {
tip = "中等";
} else if (n < 50) {
tip = "良好";
} else {
tip = "优秀";
}
return n + " : " + tip;
}
$("#r1").ionRangeSlider({
skin: "big",
grid: true,
min: 0,
max: 100,
from: 0,
step: 25,
prettify: my_prettify,
});
});
</script>
</body>
</html>
代码2:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<!-- <link
rel="stylesheet"
href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css"
/>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> -->
<!--Plugin CSS file with desired skin-->
<!-- <link rel="stylesheet" href="./css/ion.rangeSlider.css" /> -->
<link rel="stylesheet" href="./css/jquery.mobile-1.1.0.css" />
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/css/ion.rangeSlider.min.css"/> -->
<!--jQuery-->
<!-- <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> -->
<script src="./js/jquery-1.7.1.js"></script>
<script src="./js/jquery.mobile-1.1.0.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> -->
<!--Plugin JavaScript file-->
<!-- <script src="./js/ion.rangeSlider.js"></script> -->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/js/ion.rangeSlider.min.js"></script> -->
</head>
<body>
<div data-role="page">
<form>
<label for="s1"> Input slider: <span id="tip1"></span></label>
<input
type="range"
name="slider"
id="s1"
value="60"
min="0"
max="100"
step="25"
data-highlight="true"
/>
<label for="s2"> Input slider: <span id="tip2"></span></label>
<input
type="range"
name="slider"
id="s2"
value="60"
min="0"
max="200"
step="50"
data-highlight="true"
/>
</form>
</div>
<script>
$(function () {
$("input").each(function () {
$(this).bind("change", function (event, ui) {
var id = $(this).attr("id");
var num = id.substr(1, 1);
var score = $(this).val();
// console.log(score);
// var fscore = parseFloat(score);
// console.log(fscore);
var max = $(this).attr("max");
// var fmax = parseFloat(max);
var frate = score / max;
var tip = "";
switch (frate) {
case 0:
tip = "未评";
break;
case 0.25:
tip = "差评";
break;
case 0.5:
tip = "及格";
break;
case 0.75:
tip = "良好";
break;
case 1:
tip = "优秀";
break;
}
$("#tip" + num).html(tip);
});
});
$("input").slider("refresh");
});
</script>
</body>
</html>