Como chama esse efeito - Alguém sabe fazer

[alekysrocha 0]

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!

[Omar~ 87]

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

[Maujor 144]

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". 

[alekysrocha 0]

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.

[alekysrocha 0]

Desculpa, foi post duplicado.

[Omar~ 87]

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/

Mas acredito eu que tudo deve ser com jquery.

[alekysrocha 0]

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/

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.