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 ]

Published on webcomponents.org

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

Link to this version
ImportedReleased 31 October 2016MIT License
Framework Support
Polymer 1.0+
Also supported:
Polymer 2 (1.0.0)
Browser Compatibility
Install with
bower install --save Protoss78/score-element"#0.0.5"
Run the above Bower command in your project folder. If you have any issues installing, please contact the author.
Release notes - Version 0.0.5

Dependencies

  • paper-button-group#Protoss78/paper-button-group
  • iron-component-page#PolymerElements/iron-component-page#^1.0.0
  • web-component-tester#^4.0.0