Control deslizante de valor circular en JavaScript puro-circularSlider. js

Vista prévia

Descripción

La biblioteca de JavaScript de circularSlider. js le ayuda a renderizar los reguladores circulares basados en SVG para ajustar los valores con el arrastre del ratón.

Funcionamiento

Descargue e inserte el circularSlider. js en el documento.

<script src="js/circularSlider.js"></script>

Cree elementos de marcador de posición como estos:

<div id="container">
</div>

<div class="price"></div>

Cree tantos reguladores como prefiera.

var container = document.getElementById("container");

slider1 = new circularSlider({

container: container,

color: "#663A69",

range: [0, 1000],

step: 1,

radius: 250,

text: "Transportation"
});
slider1.handleInput();

slider2 = new circularSlider({

container: container,

color: "#0075B0",

range: [0, 800],

step: 1,

radius: 200,

text: "Food"
});
slider2.handleInput();

slider3 = new circularSlider({

container: container,

color: "#009D33",

range: [0, 2350],

step: 1,

radius: 150,

text: "Insurance"
});
slider3.handleInput();

slider4 = new circularSlider({

container: container,

color: "#FF7D36",

range: [0, 1567],

step: 1,

radius: 100,

text: "Entertainment"
});
slider4.handleInput();

slider5 = new circularSlider({

container: container,

color: "#FF394B",

range: [0, 500],

step: 1,

radius: 50,

text: "Health care"
});
slider5.handleInput();

Las reglas CSS para los reguladores.

.progress {

width: 100%;

height: 100%;

-webkit-transform: rotate(-90deg);

transform: rotate(-90deg);

position: relative;
}

.progress__meter,
.progress__value {

fill: none;
}

.progress__meter {

stroke: #e6e6e6;
}

.progress__value {

stroke: #f77a52;
}

.dial {

background-color: whitesmoke;

border-radius: 50%;

box-shadow: 0 0 3px black;

cursor: pointer;

height: 26px;

margin-left: -13px;

position: absolute;

top: -13px;

width: 26px;

z-index: 124;
}

input {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

width: 100%;

z-index: -1;

opacity: 0;
}