I would like to include a slider in a website form. The code I have is here:
<body>
<div style="background-color: #F1F1F1">
<div class="row">
</div>
<form action="/Beneficiary/Primary" method="post">
<label for="fader">Percentage</label>
<input type="range" min="0" max="100" value="50" id="fader" step="1" oninput="outputUpdate(value)">
<output for="fader" id="volume">50</output>
</form>
</div>
</body>
This code works and can be see here: https://codepen.io/jonathn6/pen/qxMxBm
The problem is when I include
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
When this stylesheet is included, without making any changes to any HTML, the <output> gets placed under the <input>. In addition, the length of the slider expands across the entire page.
Is it possible that there is a default type=range attribute somewhere in the bootstrap.min.css file that forces the type=range element to expand to the maximum width?
Any idea how to resolve this?
Thanks.
I think that if I used this code in the range type input tag it would solve the second problem:
<!-- ... -->
<input type="range" style="width: <width>" min="0" max="100" value="50" id="fader" step="1" oninput="outputUpdate(value)">
<!-- ... -->
Width: Any css measure.
You can place the element in a container and give it width. In the application I'm developing, I moved all elements to the <div> element with the customContainer class style applied. The customContainer class style assigns a value of 200px to the width field to set the width of the element.
let volume = document.getElementById('volume');
function outputUpdate(value) {
volume.value = value;
}/* Developed the following class style. */
.customContainer{
width: 200px;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<body>
<!-- The following item is plugin and customContainer class style is applied -->
<div class="customContainer">
<div style="background-color: #F1F1F1">
<div class="row"> </div>
<form action="/Beneficiary/Primary" method="post">
<label for="fader">Percentage</label>
<input type="range" min="0" max="100" value="50" id="fader" step="1" oninput="outputUpdate(value)">
<output for="fader" id="volume">50</output>
</form>
</div>
</div>
</body>if you have just started your project you can use bootstrap 4 and it would work right out of the box:
function outputUpdate(vol) {
document.querySelector('#volume').value = vol;
}<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
</head>
<body>
<div class="container">
<form action="/Beneficiary/Primary" method="post">
<div class="form-control">
<label for="fader">Percentage</label>
<input type="range" min="0" max="100" value="50" id="fader" step="1" oninput="outputUpdate(value)" />
<output for="fader" id="volume">50</output>
</div>
</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
</body>
</html>