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

demo

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: