4

I want to have a range input with the value shown somewhere. In this Bootstrap tutorial, the value isn't shown: https://getbootstrap.com/docs/4.1/components/forms/#range-inputs

<div class="container"> <form> <div class="form-group"> <label for="formControlRange">Example Range input</label> <input type="range" class="form-control-range" id="formControlRange"> </div> </form> </div> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

I want the minimum of custom modifications and no Javascript if possible.

Thank you for your help.

Improve this question

3 Answers 3

Reset to default
11

I don’t think it’s possible without Javascript, but try this simple solution:

<div class="container"> <form> <div class="form-group"> <label for="formControlRange">Example Range input</label> <input type="range" class="form-control-range" id="formControlRange" onInput="$('#rangeval').html($(this).val())"> <span id="rangeval">50<!-- Default value --></span> </div> </form> </div> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

3

Here is how to do it with vanilla JS. Preferably use onChange as onInput will only get called when the user initially sets a value, not when she changes it.

<div class="container"> <form> <div class="form-group"> <label for="formControlRange">Example Range input</label> <input type="range" class="form-control-range" id="formControlRange" onChange="document.getElementById('rangeval').innerText = document.getElementById('formControlRange').value"> <span id="rangeval">50<!-- Default value --></span> </div> </form> </div>
Improve this answer

2 Comments

Thank you for your answer, but as Bootstrap uses jQuery, we might as well use it, no?
Sure, Bootstrap uses jQuery and you can go with that. I just wanted to provide a minimal way of solving the issue without jQuery.
2 

 let range = $("#range-km"); let rangeV = $("#rangeV"); const setValue = () => { let newValue = Number( ((range.val() - range.attr("min")) * 100) / (range.attr("max") - range.attr("min")) ), newPosition = 10 - newValue * 0.2; rangeV.html(`<span>${range.val()}km</span>`); rangeV.css("left", `calc(${newValue}% + (${newPosition}px))`); }; setValue(); range.on("input", setValue);
#search-bar { width: 70%; margin: 50px auto; } #search-bar input { border: 1px solid #ced4da; border: 0; -webkit-appearance: none; } #search-bar .input-group { border: 1px solid #ced4da; border-radius: 0.25rem; } #search-bar input[type="range"]::-webkit-slider-runnable-track { height: 4px; cursor: pointer; animate: 0.2s; background: #03a9f4; border-radius: 25px; } #search-bar input[type="range"]::-webkit-slider-thumb { height: 20px; width: 20px; border-radius: 50%; background: #fff; box-shadow: 0 0 4px 0 rgba(0, 0, 0, 1); cursor: pointer; -webkit-appearance: none; margin-top: -8px; } #search-bar input[type="range"]:focus::-webkit-slider-runnable-track { background: #03a9f4; } #search-bar .range-wrap { padding: 4px 6px 0px 6px; position: relative; } #search-bar .range-value { position: absolute; top: -50%; } #search-bar .range-value span { width: 40px; height: 24px; line-height: 24px; text-align: center; background: #03a9f4; color: #fff; font-size: 12px; display: block; position: absolute; left: 50%; transform: translate(-50%, 0); border-radius: 6px; } #search-bar .range-value span:before { content: ""; position: absolute; width: 0; height: 0; border-top: 10px solid #03a9f4; border-left: 5px solid transparent; border-right: 5px solid transparent; top: 100%; left: 50%; margin-left: -5px; margin-top: -1px; }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="search-bar"> <form id="product-search-bar" action="" method="POST" > <div class="input-group"> <input type="text" class="form-control" id="search-product" name="search-product" placeholder="Search..." required /> <div class="input-group-append"> <div class="range-wrap"> <div class="range-value" id="rangeV"></div> <input id="range-km" name="range-km" type="range" min="0" max="50" value="0" step="5" /> </div> <button class="btn btn-info" type="submit"> Submit </button> </div> </div> </form> </div>

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.