'Including bootstrap.min.css breaks my <input type="range">

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">
            &nbsp;
        </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.

javascripthtmlcssbootstrap-4


Solution 1:[1]

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.

Solution 2:[2]

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/[email protected]/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/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>

</body>

</html>

Solution 3:[3]

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">&nbsp;</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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Marcos-MD
Solution 2 legitnuggets
Solution 3

Related Questions