Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá pessoal, tudo bem ?
Estou tentando desenvolver essa barra de rolagem na horizontal (circulado em vermelho) (anexo)
Alguém sabe o nome dessa função e é possível fazer em html/css?
Obrigado!
A figura mostra a barra de rolagem de um box.
Para alterar o aspecto da barra você precisa usar JavaScript.
Procure por "javascript custom scrollbar".
>
Em 28/04/2018 at 03:59, Omar~ disse:
Certo, e como seria essa barra de rolagem, qual seria a finalidade dela?
Bom como não sei o que quis dizer, pode ser a barra de rolagem do navegador, acionada pela propriedade overflow-x
Ou talvez algum tipo de srollbar, para fazer não sei o que porque você não disse. Nesse caso achei esse exemplo aqui: https://www.w3schools.com/howto/howto_js_rangeslider.asp
Achei esse mesmo na internet e estou utilizando.
É meio difícil eu explicar o que eu quero fazer pois é uma automação residencial.
Teria como você me ajudar em um negócio ? Quando a barra de rolagem rolar "50%" os 49% muda de cor. E também mostrar em um campo o valor que está atualmente?
O css que estou utilizando é
index.html
<div class="slidecontainer">
<input type="range" data-highlight="true" min="1" max="100" value="50" class="slider" id="myRange">
</div>
.slider {
-webkit-appearance: none;
width: 98%;
height: 5px;
border-radius: 5px;
background: gray;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: blue;
cursor: pointer;
}.slider::-moz-range-thumb {
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}>
Em 28/04/2018 at 08:39, Maujor disse:
A figura mostra a barra de rolagem de um box.
Para alterar o aspecto da barra você precisa usar JavaScript.
Procure por "javascript custom scrollbar".
Não queria utilizar javascript mas se for preciso vou ter que utilizar.
Desculpa, foi post duplicado.
Confesso que nunca mexi com isso, por isso não saberia criar algo assim do nada.
Entretanto fiz uma coisa aqui, só para teste mesmo:
Spoiler
<style>
, :before, *:after {margin:0; padding:0; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%}
.slidecontainer {
width: 100%; /* Width of the outside container */
/* Propidades do contaniner para funcionar o efeito desejado */
position: relative;
height: 26px;
margin-top: 80px; /* Só coloquei essa margin para teste mesmo */
}/ The slider itself /
.slider {
-webkit-appearance: none;
width: 100%;
height: 26px;
background: none;
outline: none
}/ Mouse-over effects /
.slider:hover {
opacity: 1;
}.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: blue;
cursor: pointer
}.slider::-moz-range-thumb {
width: 25px;
height: 25px;
border-radius: 50%;
background: blue;
cursor: pointer
}
.barra-colorida {
height: 2px;
top: 12px;
left:0;
background: blue;
position: absolute;
z-index: 1
}
</style>
<div class="slidecontainer">
<div class="barra-colorida" id="barra"></div>
<input type="range" min="1" max="100" value="0" class="slider" id="myRange">
</div>
<div id="demo"></div>
<script>
var slider = document.getElementById('myRange');
var output = document.getElementById('demo');
var barra = document.getElementById('barra');
output.innerHTML = slider.value;
barra.style.width = Math.ceil(slider.value) + '%';
slider.oninput = function() {
output.innerHTML = this.value;
barra.style.width = Math.ceil(this.value) + '%';
}
</script>
Eu criei uma barra que fica sobreposta a em cima, ao percorrer com o input a largura dessa barra é modificada com o valor do input o que gerou um efeito similar ao que pretende fazer.
Depois então uma "googlada" rapidinho e achei muita coisa a respeito. Veja aqui tem muita coisa assim: [https://codepen.io/collection/DgYaMj/](https://codepen.io/collection/DgYaMj/)
Mas acredito eu que tudo deve ser com jquery.>
15 horas atrás, Omar~ disse:
Confesso que nunca mexi com isso, por isso não saberia criar algo assim do nada.
Entretanto fiz uma coisa aqui, só para teste mesmo:
Ocultar conteúdo
<style>
, :before, *:after {margin:0; padding:0; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%}
.slidecontainer {
width: 100%; /* Width of the outside container */
/* Propidades do contaniner para funcionar o efeito desejado */
position: relative;
height: 26px;
margin-top: 80px; /* Só coloquei essa margin para teste mesmo */
}/ The slider itself /
.slider {
-webkit-appearance: none;
width: 100%;
height: 26px;
background: none;
outline: none
}/ Mouse-over effects /
.slider:hover {
opacity: 1;
}.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: blue;
cursor: pointer
}.slider::-moz-range-thumb {
width: 25px;
height: 25px;
border-radius: 50%;
background: blue;
cursor: pointer
}
.barra-colorida {
height: 2px;
top: 12px;
left:0;
background: blue;
position: absolute;
z-index: 1
}
</style>
<div class="slidecontainer">
<div class="barra-colorida" id="barra"></div>
<input type="range" min="1" max="100" value="0" class="slider" id="myRange">
</div>
<div id="demo"></div>
<script>
var slider = document.getElementById('myRange');
var output = document.getElementById('demo');
var barra = document.getElementById('barra');
output.innerHTML = slider.value;
barra.style.width = Math.ceil(slider.value) + '%';
slider.oninput = function() {
output.innerHTML = this.value;
barra.style.width = Math.ceil(this.value) + '%';
}
</script>
Eu criei uma barra que fica sobreposta a em cima, ao percorrer com o input a largura dessa barra é modificada com o valor do input o que gerou um efeito similar ao que pretende fazer.
Depois então uma "googlada" rapidinho e achei muita coisa a respeito. Veja aqui tem muita coisa assim: [https://codepen.io/collection/DgYaMj/](https://codepen.io/collection/DgYaMj/)
Mas acredito eu que tudo deve ser com jquery.
Obrigado pela ajuda mas irei utilizar jquery mesmo. Gostei de alguns modelos desse site que você mencionou.
Obrigado pela ajuda.
Certo, e como seria essa barra de rolagem, qual seria a finalidade dela?
Bom como não sei o que quis dizer, pode ser a barra de rolagem do navegador, acionada pela propriedade overflow-x
Ou talvez algum tipo de srollbar, para fazer não sei o que porque você não disse. Nesse caso achei esse exemplo aqui: https://www.w3schools.com/howto/howto_js_rangeslider.asp