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

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา รบกวนขอโค๊ด เกี่ยวกับ ทำ สไลด์บาร์ หน่อยครับ

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

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

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

Siriok 29-10-2015 12:35:05

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

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

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

Pass

Code
เปลี่ยน

จำข้อมูลการล็อกอิน
เข้าระบบอัตโนมัติ

( หรือ เข้าใช้งานผ่าน Social Login )

ล็อกอินด้วย Line

ล็อกอินด้วย Google

ล็อกอินด้วย Twitter

ล็อกอินด้วย Tiktok

ความคิดเห็นที่ 1

เหมือนจะไม่มีน่ะ

ninenik 29-10-2015

ความคิดเห็นที่ 2

กะเอามาทำ ที่อ่านความเข้มข้นของเลือด ครับ ตามรูป

siriok 29-10-2015 12:52

ความคิดเห็นที่ 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 29-10-2015 12:59

ความคิดเห็นที่ 4

น่าจะแนวๆ range slider หรือป่าว ลองดูเว็บนี้เป็นแนวทาง

http://refreshless.com/nouislider/

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

ninenik 29-10-2015

ความคิดเห็นที่ 5

ขอบคุณครับ..

siriok 29-10-2015 14:10

ความคิดเห็นที่ 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 30-10-2015 14:46

ความคิดเห็นที่ 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 31-10-2015

ความคิดเห็นที่ 8

ขอบคุณมากเลยครับ..

siriok 02-11-2015 09:40

ความคิดเห็นที่ 9

รบกวนอีกนิดครับ..ถ้าผมอยากได้ค่า 2 ค่าที่เกิดขึ้นมา คำนวน ผมลองอย่างนี้นะครับ

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>

มันไม่เกิดอะไรขึ้นครับ.เวลากดปุ่ม ไม่ทราบว่าต้องเอาตัวแปรไหนมากำหนด เป็น a ,b ผมลองหลายๆค่า ก็ไม่ได้ครับ..

siriok 02-11-2015 11:11

ความคิดเห็นที่ 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 02-11-2015

1 2 Next

ขอบคุณทุกการสนับสนุน

สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet

20 บาท 50 บาท 100 บาท 300 บาท หรือ ระบุจำนวน