Control deslizante de degradado en Pure JavaScript-Slider. js

Vista prévia

Descripción

Slider. js es una biblioteca de JavaScript mínima para mejorar y embellecer el valor predeterminado rango de control deslizante con estilos personalizados y funcionalidad adicional.

Funcionamiento

Cree una entrada de rango normal en la página.

<input id="slide" type="range" min="10" max="100" value="62" oninput="displayValue(event)" />

Cree un elemento insertado para mostrar el valor actual.

<span id="val"></span>

Eso es todo. También puede crear controles para cambiar los valores máximo/mínimo permitidos para seleccionar.

<div class="form">

<div>


<label for="min">Lower bound</label>


<input type="number" id="min" onkeydown="checkPostiveInteger(event)" oninput="checkValidLimits()" placeholder="
< and != upper bound">

</div>

<div>


<label for="max">Upper bound</label>


<input type="number" id="max" onkeydown="checkPostiveInteger(event)" oninput="checkValidLimits()" placeholder="
> and != lower bound">

</div>

<button onclick="changeLimits()" id="limitButton" disabled>Apply limits</button>
</div>

Aplique sus propios estilos CSS al control deslizante.

input[type=range] {

width: 100%;

-webkit-appearance: none;

margin: 0;
}

input[type=range]:focus { outline: none; }
input[type=range]::-webkit-slider-runnable-track {
 width: 100%;
 height: 19px;
 cursor: pointer;
 box-shadow: 0 4px 4px rgba(0,0,0,0.3) inset;
 background: linear-gradient(to right, #005fc2, #35A834 40%, #ffd400 65%, #FF6400);
 border-radius: 20px;
 border: 0.2px solid #010101;
}

input[type=range]::-webkit-slider-thumb {
 box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
 border: 1px solid #000000;
 height: 20px;
 width: 20px;
 border-radius: 20px;
 background: white;
 cursor: pointer;
 -webkit-appearance: none;
 margin-top: -1px;
}

#slide:before {

content: attr(min);

position: absolute;

bottom: 0;

left: 0;

color: black;

font-size: 1rem;
}

#slide:after {

content: attr(max);

position: absolute;

bottom: 0;

right: 0;

color: black;

font-size: 1rem;
}

#val {

font-size: 1.6rem;

position: absolute;

left: 0;

bottom: 40px;

width: 100px;
}