ionic 3 round slider
Aug 26, 2017 · 1 min read
npm install angular2-round-slider — save
Include RoundSliderComponent in your Angular 2 main module:
// ...import { RoundSliderComponent } from 'angular2-round-slider/dist';@NgModule({// ...declarations: [// ...RoundSliderComponent]})export class AppModule { }
Usage
<round-slider #sliderElem
[width]=”140"
[height]=”140"
[radius]=”50"
dragging=’true’
[max]=”100"
[min]=”0"
[imageUrl]=”’https://s-media-cache-ak0.pinimg.com/736x/99/9b/af/999baff3288ebe0232ac9d34ac7b73ba.jpg'"
[value]=”levelControlValue”
(onChangeEnd)=”listenerEvent$(sliderElem.value)”
></round-slider>
Styling
Please make sure to include and customize the component scss in your angular project
round-slider {display: block;.round-slider-container {position: relative;}.container {position: absolute;left: 0;top: 0;z-index: 20;}.round-slider-image {background-size: cover;border-radius: 50%;position: absolute;}.round-slider-text {text-align: center;position: absolute;width: 100%;display: table-cell;vertical-align: middle;top: 41%;pointer-events: none;z-index: 10;color: white;font-size: 18px;}.circumference {&.transparent {fill: transparent;}fill: #f2f2f2;}.dot circle:hover {cursor: pointer;}.dot circle {fill: lightsteelblue;stroke: lightsteelblue;stroke-width: 1.5px;}.dot circle.dragging {fill: steelblue;stroke: steelblue;}.arc {fill: steelblue;}}