A web component that is used to pick a numeric score value from a predefined range.
[ This description is mirrored from README.md at github.com/Protoss78/score-element on 2019-05-22 ]
score-element
A web component that I mainly use to pick a numeric score value from a predefined numeric range. The numeric range can be set by choosing a start and an end value. You can also define a step size (default is 1) and decimal precision (default is 0). The selected value can be get or set via the selected property. It uses the paper-button-group web component to generate the required paper-buttons. One button per calculated step is created.
Example:
<score-element selected="{{select1}}"></score-element>
<score-element start="0.5" end="2.0" step="0.1" decimals="1"></score-element>
<score-element class="green" start="0.5" end="2.0" step="0.1" decimals="1" ltr></score-element>
Available Style Variables:
--button-score-color: Defines the background color of the button
--text-score-color: Defines the text color of the button
--hover-score-color: Defines the background color of the button in hover state
--hover-text-score-color: Defines the text color of the button in hover state
--selected-score-color: Defines the background color of the button in selected state
--selected--text-score-color: Defines the text color of the button in hover state
Install
Framework Support
Browser Compatibility
Install with
Run the above Bower command in your project folder.
If you have any issues installing, please
contact the author.
Release notes - Version 1.0.0
Dependencies
- polymer#Polymer/polymer#1.9 - 2
- paper-button#PolymerElements/paper-button#1 - 2
- paper-button-group#Protoss78/paper-button-group#^1.0.0