<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Strait"> <div class="container mt-4" style="font-family: 'Strait', sans-serif;"> <div class="row"> <div class="container"> <form> <div class="form-group"> <h2>Range Bar</h2> <label for="formControlRange">Example Range input</label> <input type="range" class="form-control-range" id="formControlRange" onInput="$('#rangeval').html($(this).val())"> <h2><span id="rangeval" class="my-4 py-2 badge badge-primary badge-pill">50</span></h2> </div> </form> <form> <div class="form-group"> <label for="formControlRange">Example Range input</label> <input type="range" class="form-control-range" id="formControlRange"> </div> </form> <br><br> <form> <div class="form-group"> <input type="range" class="custom-range form-control-range" min="0" max="50" step="0.5" id="ex6" value="0"> <br> <span class="mt-5">Sürükledikten sonraki rakam: <span id="ex6Val"></span> </span> </div> </form> <nav class="navbar navbar-expand-sm bg-warning"> <!-- Links --> <ul class="navbar-nav font-weight-bold"> <li class="nav-item"> <a class="nav-link" href="#">Link 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 2</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 3</a> </li> </ul> </nav> </div> </div> </div>

$(document).ready(function () { $('#ex6').on('change', function(e) { var id = e.target.value; document.getElementById("ex6Val").innerHTML = id; }); $('#ex6').change(); });