Add A Range Slider
Value ေတြကို တစ္ခု နဲ႕ တစ္ခုၾကားက ေရြးခ်ယ္ေပးေစလိုရင္ေတာ့ ကၽြန္ေတာ္တုိ႕ေတြကို Range ကို အသံုးျပဳႏိုင္ပါတယ္။
<!DOCTYPE html>
<html>
<head>
<title>Simple Form</title>
</head>
<body>
<form method="post" action="./post.php">
Budget :
<input type="range" name="budget" min="100" max="5000" value="1000" step="100">
</form>
</html>အထက္ပါ code မွာ
<input type="range" name="budget" min="100" max="5000" value="1000" step="100">ကို အသံုးျပဳထားျပီးေတာ့ range ေလး ထည့္ထားပါတယ္။ min ကေတာ့ အနည္းဆံုး တန္ဖိုးနဲ႕ max ကေတာ့ အမ်ားဆံုး တန္ဖိုးေပါ့။ အခု ဥပမာ မွာ ၁၀၀ ကေန ၅၀၀၀ အတြင္း ေရြးခြင့္ေပးထားတယ္။ step="100" ဆုိတဲ့ သေဘာကကေတာ့ value ေျပာင္းလဲရင္ 100 အတိုးအေလ်ာ့လုပ္မယ္။ Browser မွာ ဆုိရင္ ေအာက္ကလိုမ်ဳိး ျမင္ရပါမယ္။
Figure 8-19
သို႕ေပမယ့္ range value ေျပာင္းသြားရင္ ကၽြန္ေတာ္တုိ႕ေတြ မသိပါဘူး။ ဒါေၾကာင့္ ကၽြန္ေတာ္တုိ႕ေတြ javascript ကို သံုးျပီးေတာ့ value ေျပာင္းသြားတာကို ေဖာ္ျပေပးပါမယ္။ ဒီအခန္းမွာေတာ့ javascript အေၾကာင္း အေသးစိတ္မေျပာေတာ့ပါဘူး။ javascript အခန္းမွာလည္း event ေတြ အေၾကာင္းပါဝင္လာပါလိမ့္မယ္။
<!DOCTYPE html>
<html>
<head>
<title>Simple Form</title>
</head>
<body>
<form method="post" action="./post.php">
Budget :
<input type="range" name="budget" min="100" max="5000" value="1000" step="100" onchange="document.getElementById('display').innerHTML=this.value">
<span id="display">1000</span>
</form>
</html>အဲဒီ code မွာ ကၽြန္ေတာ္တိုကေတြ range ရဲ႕ onchange event မွာ script ေလးေရးထားတာကို ေတြ႕ရပါလိမ့္မယ္။
onchange="document.getElementById('display').innerHTML=this.value"value change သြားတိုင္း id ကို display လုိ႕ေပးထားတဲ့ element က html ကို သြားျပင္ေပးပါလိမ့္မယ္။ ဒါေၾကာင့္ range slider value ျပင္လိုက္တိုင္း လိုက္ျပီး update လုပ္ေပးေနပါလိမ့္မယ္။
Figure 8-20