PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

รบกวนขอโค๊ด เกี่ยวกับ ทำ สไลด์บาร์ หน่อยครับ

รบกวนขอโค๊ด เกี่ยวกับ ทำ สไลด์บาร์ หน่อยครับ
ผมอยากได้ สไลด์บาร์แนวตั้ง มี สองปุ่มอยู่ข้างล่าง (ซ้อนทับกันอยู่) ค่าเริ่มต้นเป็น 0
เวลาใช้งาน เลื่อนปุ่มแรก เพื่อกำหนด ระยะทาง คิดเป็น 100% ( วางตรงไหน ก็คิดว่า เป็น ค่าสูงสุด)
ต่อมา เลื่อนปุ่มที่ 2 ไปเพื่อกำหนดระยะ แล้วคำนวนค่าออกมา เป็น % (เทียบกับ ปุ่มแรกครับ..)
งงๆกับโค๊ดมากครับ

รบกวนหน่อยนะครับ..ขอบคุณมากครับ

โดย:  Siriok IP: 125.26.247.xxx วันที่: 29-10-2015 เวลา: 12:35:05

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ


  • ( หรือ สามารถทำการ สมัครสมาชิก และล็อกอิน ด้วย ปุ่ม Log in with Facebook ด้านล่าง )
 ความคิดเห็นที่ 11
ขอบคุณมากๆเลยครับ..

โดย:  Siriok IP: 125.26.252.xxx วันที่: 02-11-2015 เวลา: 14:15:50
 ความคิดเห็นที่ 10






น่าจะประมาณนี้

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link href="http://refreshless.com/noUiSlider/distribute/nouislider.min.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://refreshless.com/noUiSlider/distribute/nouislider.js"></script>
</head>
<body>
    

<style>
#showcase2 {
	margin: 0 20px;
	text-align: center;
    width: 250px;
}
#range2 {
	height: 300px;
	margin: 0 auto 30px;
}
#value-input-a,
#value-input-b,
#value-input-c {
	width: 100px;
	float: left;
	display: block;
	text-align: center;
	margin: 0;
    margin-right: 10px;
}
</style>


<div class="example" id="showcase2">
			<div id="range2"></div>

			<input id="value-input-a">
			<input id="value-input-b">
			<br><br>
			<input id="value-input-c">
</div>


<script type="text/javascript">
var slider = $("#range2")[0];

noUiSlider.create(slider, {
	start: [ 20, 80 ], // Handle start position
	step: 10, // Slider moves in increments of '10'
	margin: 20, // Handles must be more than '20' apart
	connect: true, // Display a colored bar between the handles
	direction: 'rtl', // Put '0' at the bottom of the slider
	orientation: 'vertical', // Orient the slider vertically
	behaviour: 'tap-drag', // Move handle on tap, bar is draggable
	range: { // Slider can select '0' to '100'
		'min': 0,
		'max': 100
	},
	pips: { // Show a scale with the slider
		mode: 'steps',
		density: 2
	}
});
</script>
<script>
slider.noUiSlider.on('update', function( values, handle ) {
	if ( handle ) {
        $("#value-input-b").val(values[handle]);
	} else {
        $("#value-input-a").val(values[handle]);
	}
    var a = $("#value-input-a").val();
    var b = $("#value-input-b").val();
    var calc_v = (a/b)*100;
    calc_v = calc_v.toFixed(2);
   $("#value-input-c").val(calc_v);    
});

    $("#value-input-a,#value-input-b").on("change",function(){
        console.log($(this).attr("id"));
        if($(this).attr("id")=="value-input-a"){
             slider.noUiSlider.set([$(this).val() , null]);
        }else{
             slider.noUiSlider.set([null, $(this).val()]);
        }
    });

</script>    
    
</body>
</html>


โดย:  Ninenik IP: 183.88.76.xxx วันที่: 02-11-2015
 ความคิดเห็นที่ 9
รบกวนอีกนิดครับ..ถ้าผมอยากได้ค่า 2 ค่าที่เกิดขึ้นมา คำนวน ผมลองอย่างนี้นะครับ
<script>
 
 
var a = document.getElementById('value-input');
    b = document.getElementById('value-span');
function hct() {
    return  = b * 100 / a ;
}
</script>
 
<button type="button"
onclick="document.getElementById('demo').innerHTML = hct()">
Calculate Hct.</button>  
<p id="demo"></p>
มันไม่เกิดอะไรขึ้นครับ.เวลากดปุ่ม ไม่ทราบว่าต้องเอาตัวแปรไหนมากำหนด เป็น a ,b ผมลองหลายๆค่า ก็ไม่ได้ครับ..


โดย:  Siriok IP: 125.26.254.xxx วันที่: 02-11-2015 เวลา: 11:11:46
 ความคิดเห็นที่ 8
ขอบคุณมากเลยครับ..

โดย:  Siriok IP: 125.26.254.xxx วันที่: 02-11-2015 เวลา: 09:40:28
 ความคิดเห็นที่ 7
น่าจะต้องใช้เป็น html5

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
<link href="http://refreshless.com/noUiSlider/distribute/nouislider.min.css" rel="stylesheet">
<style>
#showcase {
	margin: 0 20px;
	text-align: center;
}
#range {
	height: 300px;
	margin: 0 auto 30px;
}
#value-span,
#value-input {
	width: 50%;
	float: left;
	display: block;
	text-align: center;
	margin: 0;
}
</style>


<div class="example" id="showcase">
			<div id="range"></div>
			<span id="value-span"></span>
			<input id="value-input">
</div>

<script src="http://refreshless.com/noUiSlider/distribute/nouislider.js"></script>
<script type="text/javascript">
var slider = document.getElementById('range');

noUiSlider.create(slider, {
	start: [ 20, 80 ], // Handle start position
	step: 10, // Slider moves in increments of '10'
	margin: 20, // Handles must be more than '20' apart
	connect: true, // Display a colored bar between the handles
	direction: 'rtl', // Put '0' at the bottom of the slider
	orientation: 'vertical', // Orient the slider vertically
	behaviour: 'tap-drag', // Move handle on tap, bar is draggable
	range: { // Slider can select '0' to '100'
		'min': 0,
		'max': 100
	},
	pips: { // Show a scale with the slider
		mode: 'steps',
		density: 2
	}
});
</script>
<script>
var valueInput = document.getElementById('value-input'),
	valueSpan = document.getElementById('value-span');

// When the slider value changes, update the input and span
slider.noUiSlider.on('update', function( values, handle ) {
	if ( handle ) {
		valueInput.value = values[handle];
	} else {
		valueSpan.innerHTML = values[handle];
	}
});

// When the input changes, set the slider value
valueInput.addEventListener('change', function(){
	slider.noUiSlider.set([null, this.value]);
});
</script>    
    
</body>
</html>


โดย:  Ninenik IP: 1.47.38.xxx วันที่: 31-10-2015
 ความคิดเห็นที่ 6
ตอนแรกดุจากเวป ที่ให้แล้ว คิดว่าง่าย พอเอาเข้าจริงๆ ผมว่ามันแปลกๆ ไฟล์เล้กมาก ครับ พวก Js ,CSS แล้วลองเขียนโค๊ด รันดูก็ไม่มีอะไรขึ้นมาตาม
นี้ครับ..
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hct calculation</title>

<link href="nouislider.min.css" rel="stylesheet">
<style>
#showcase {
	margin: 0 20px;
	text-align: center;
}
#range {
	height: 300px;
	margin: 0 auto 30px;
}
#value-span,
#value-input {
	width: 50%;
	float: left;
	display: block;
	text-align: center;
	margin: 0;
}
</style>
</head>

<body>

<script src="nouislider.min.js">
var slider = document.getElementById('slider');

noUiSlider.create(slider, {
	start: [ 20, 80 ], // Handle start position
	step: 10, // Slider moves in increments of '10'
	margin: 20, // Handles must be more than '20' apart
	connect: true, // Display a colored bar between the handles
	direction: 'rtl', // Put '0' at the bottom of the slider
	orientation: 'vertical', // Orient the slider vertically
	behaviour: 'tap-drag', // Move handle on tap, bar is draggable
	range: { // Slider can select '0' to '100'
		'min': 0,
		'max': 100
	},
	pips: { // Show a scale with the slider
		mode: 'steps',
		density: 2
	}
});
</script>
<script>
var valueInput = document.getElementById('value-input'),
	valueSpan = document.getElementById('value-span');

// When the slider value changes, update the input and span
slider.noUiSlider.on('update', function( values, handle ) {
	if ( handle ) {
		valueInput.value = values[handle];
	} else {
		valueSpan.innerHTML = values[handle];
	}
});

// When the input changes, set the slider value
valueInput.addEventListener('change', function(){
	slider.noUiSlider.set([null, this.value]);
});
</script>

</body>
</html>
ผมลองทำตามที่ ตัวอย่างในหน้าแรกให้มา ก็ไม่มีอะไรแสดงหน้าเวปเลยครับ..เลยงง ว่าผมผิดอะไรเปล่า
( ไฟล์ที่ให้ พวก js,css ก็อัพเรียบร้อยใน server) รบกวนเช็คให้ดูผมหน่อยได้เปล่าครับ.ว่าผมผิดตรงไหน


โดย:  Siriok IP: 125.26.242.xxx วันที่: 30-10-2015 เวลา: 14:46:30
 ความคิดเห็นที่ 5
ขอบคุณครับ..

โดย:  Siriok IP: 125.26.241.xxx วันที่: 29-10-2015 เวลา: 14:10:58
 ความคิดเห็นที่ 4
น่าจะแนวๆ range slider หรือป่าว ลองดูเว็บนี้เป็นแนวทาง

http://refreshless.com/nouislider/

หรือค้นคำว่า range slider ใน google อาจพอช่วยได้



โดย:  Ninenik IP: 180.183.104.xxx วันที่: 29-10-2015
 ความคิดเห็นที่ 3
ผมลองทำใน flash เอาตัวอย่างโค๊ดของ volume มาน่ะครับ..ตามนี้
function applyValue() {
    // This function gets values from the slider's position
    // and applies it to our selected object property
    var sliderPercent:Number = Math.round(slider.thumb._x / (slider.track._width - slider.thumb._width) * 100);
    var totalVal:Number = this.maxVal - this.minVal;
    var valDiff:Number = totalVal * (sliderPercent / 100);
    var newVal:Number = Math.round(this.minVal + valDiff);
    // Display new value in info textfield
    this.info.text = this.infoText + newVal + infoPunc;
    // Apply new value to object properties
    _parent.trackAudio.setVolume(newVal);
   
}
function setSlider() {
    // Make sure we didn't set incorrect starting values
    if (this.startVal <= this.minVal) {
        this.startVal = this.minVal;
    }
    if (this.startVal > this.maxVal) {
        this.startVal = this.maxVal;
    }
    // Figure out the starting position (percentage of slider's width)
    var startPercent:Number = Math.round((this.startVal - this.minVal) / (this.maxVal - this.minVal) * 100);
    //var startPercent:Number = Math.round((this.maxVal - this.minVal) * 100);
    // Set slider position
    slider.thumb._x = (startPercent / 100) * (slider.track._width - slider.thumb._width);
    
}
onSelfEvent(load) {
    var isDragging:Boolean = false;
    // Set min/max/start values for object properties
    var minVal:Number = 0;
    var maxVal:Number = 100;
    var startVal:Number = 10;
    // Set info textfield defaults
    var infoText:String = "Plasma : ";
    var infoPunc:String = "%";
    // Position the slider
    setSlider();
    applyValue();
}
onSelfEvent(enterframe) {
    if (isDragging) {
        applyValue();
    }
}

ตอนนี้เลื่อนปุ่มไปบนสุดมัน ได้ 100% แต่อยากให้ปุ่มเหลืองเลื่อนไปตำแหน่งไหน ก็อ่านเป็น ค่า 100% (หรือเก็บค่าระยะทางไว้ เพื่อเอามาคำนวน เทียบกับปุ่ม แดง )
ปล.รูปบนในปุ่มเหลืองค่าที่อ่านต้องได้ 100 % ครับ.ลืมแก้
ตามโค๊ดบนต้องแก้ตรงไหนครับ พอจะมีแนวทางไหมครับ..กำลังลองแก้โค๊ดด้านบนอยู่เหมือนกัน แต่งงๆ
ขอบคุณมากครับ..


โดย:  Siriok IP: 125.26.247.xxx วันที่: 29-10-2015 เวลา: 12:59:37
 ความคิดเห็นที่ 2
กะเอามาทำ ที่อ่านความเข้มข้นของเลือด ครับ ตามรูป


โดย:  Siriok IP: 125.26.247.xxx วันที่: 29-10-2015 เวลา: 12:52:54
 ความคิดเห็นที่ 1
  เหมือนจะไม่มีน่ะ

โดย:  Ninenik IP: 122.155.34.xxx วันที่: 29-10-2015