Me gustaría incluir un control deslizante en un formulario de sitio web. El código que tengo está aquí:
<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>Este código funciona y se puede ver aquí: https://codepen.io/jonathn6/pen/qxMxBm
El problema es cuando incluyo
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> Cuando se incluye esta hoja de estilo, sin realizar ningún cambio en ningún HTML, <output> se coloca debajo de <input> . Además, la longitud del control deslizante se expande por toda la página.
¿Es posible que haya un atributo type=range predeterminado en algún lugar del archivo bootstrap.min.css que obligue al elemento type=range a expandirse al ancho máximo?
¿Alguna idea de cómo resolver esto?
Gracias.
Creo que si usara este código en la etiqueta de entrada de tipo de rango, resolvería el segundo problema:
<!-- ... --> <input type="range" style="width: <width>" min="0" max="100" value="50" id="fader" step="1" oninput="outputUpdate(value)"> <!-- ... -->Ancho: Cualquier medida css.
Puede colocar el elemento en un contenedor y darle ancho. En la aplicación que estoy desarrollando, moví todos los elementos al elemento <div> con el estilo de clase customContainer aplicado. El estilo de clase customContainer asigna un valor de 200 px al campo de ancho para establecer el width del elemento.
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>si acaba de comenzar su proyecto, puede usar bootstrap 4 y funcionaría de inmediato:
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>