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 28 May 2017MIT License
Framework Support
Polymer 2.0+
Also supported:
Polymer 1 (0.0.5)
Browser Compatibility
Install with
bower install --save Protoss78/score-element"#1.0.0"
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