Cara Menyesuaikan Radius Objek menggunakan Slider di JavaScript
Cara Menyesuaikan Radius Objek menggunakan Slider di JavaScript - Pada tutorial kali ini saya akan membagikan yaitu Cara Menyesuaikan Radius Objek menggunakan Slider di JavaScript. Cara ini sangat sederhana dan mudah dipahami, cukup ikuti instruksi yang saya berikan dan Anda dapat melakukannya tanpa masalah.
Program ini dapat digunakan untuk semua sistem atau aplikasi yang membutuhkan fitur untuk mengatur radius objek. Saya akan memberikan yang terbaik untuk memberi Anda cara termudah untuk membuat program ini Menyesuaikan Radius Objek.
Sebelum kita mulai silahkan download templatenya di https://getbootstrap.com/.
Di sini kita akan membuat antarmuka sederhana untuk aplikasi kita. Kode ini hanya akan menampilkan objek html dan slider html. Untuk membuat ini cukup salin dan tulis ke editor teks Anda, lalu simpan sebagai index.html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<a class="navbar-brand" href="https://anakupb.blogspot.com">AnakUpB</a>
</div>
</nav>
<div class="col-md-3"></div>
<div class="col-md-6 well">
<h3 class="text-primary">Cara Menyesuaikan Radius Objek menggunakan Slider di JavaScript</h3>
<hr style="border-top:1px dotted #ccc;"/>
<div class="col-md-6">
<div id="target" style="width:100%; height:300px; background-color:blue; border:2px solid #000;"></div>
</div>
<div class="col-md-3">
<div class="form-inline">
<input type="text" id="slide_text" class="form-control" value="0" size="4" readonly="readonly"/>
</div>
<div class="form-group">
<label>Set Value</label>
<input type="range" oninput="adjustRadius(this);" value="0" min="0" max="150"/>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Disinilah fungsi utama dari aplikasi ini. Kode ini memungkinkan Anda menyesuaikan radius objek secara dinamis. Untuk melakukan ini cukup salin dan tulis blok kode ini di dalam editor teks dan simpan sebagai script.js.
function adjustRadius(slider){
var input=document.getElementById("slide_text");
input.value=slider.value;
document.getElementById("target").style.borderRadius=slider.value+"px";
}
Pada kode di atas kita cukup membuat satu metode bernama adjustRadius(). fungsi ini secara dinamis akan menyesuaikan radius suatu objek. Fungsi ini akan menyesuaikan radius objek secara dinamis dengan mengutak-atik properti radius perbatasan objek css.
Cara Mengatur Radius Objek Menggunakan Slider di Source Code JavaScript yang saya sediakan bisa di download di bawah ini. Silakan klik tombol unduh.
DOWNLOAD
Sekarang anda telah berhasil membuat Cara Menyesuaikan Radius Objek menggunakan Slider di JavaScript. Saya harap tutorial sederhana ini membantu Anda menemukan apa yang Anda cari. Untuk pembaruan dan tutorial lebih lanjut, silakan kunjungi situs ini. Semoga berhasil...!!!