mindlife-custom-battery-rangeslider v0.3.8
MINDLIFE BATTERY
This is a custom element that lets users slide up and down a battery level with options such as animated hint at startup or read-only (disabled) mode to just display a value.
The following link demonstrate how to use the project in Angular
private demo repo for authorised people
Installation
npm install mindlife-custom-battery-rangeslider
Angular
Using a Stencil built web component collection within an Angular CLI project is a two-step process. We need to:
Include the CUSTOM_ELEMENTS_SCHEMA in the modules that use the components. Call defineCustomElements() from main.ts (or some other appropriate place).
Please read: https://stenciljs.com/docs/angular
Usage
import 'mindlife-custom-battery-rangeslider';
<mindlife-battery></mindlife-battery>
Events
The only emitted event is the value of the slider when it moves mindlife-battery-value
it will be between 0 and 100.
document.addEventListener("mindlife-battery-value",(e)=>{console.log(e)})
Properties
Example
<mindlife-battery value="40" reversed="false" animated-hint="false" disabled="false" single-color="true" color-steps="2" container="battery"></mindlife-battery>
value
is the value set by the component at initialisation, it's watched at all time so the slider updates itself upon change.
animated-hint
is a boolean value to enable the UX hint that will shake the handle of the slider to hint user that it can be moved.
disabled
is a boolean value to make the slider read only through the value
property defined above.
single-color
is a boolean value to make the slider show only one color at a time, when true all segments will be the color of the highest value, if false, each segment color will be its own color level.
reversed
boolean, if true, green is the color at the bottom and goes to red at the top.
color-steps
1 or 2, this is the number of steps where a segment color changes to another shade
container
'battery' or 'container' a battery or a simple container is used
container-opacity
number from 0 to 1, 0 being fully transparent and 1 being fully opaque
hue-rotation
number from 0 to 360 following HSL convention like this:
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago