.devcontainer/devcontainer.json

@@ -0,0 +1,35 @@
+{
+    "name": "Slider-entity-row Dev",
+    "image": "thomasloven/hass-custom-devcontainer",
+    "postCreateCommand": "sudo -E container setup-dev && npm add",
+    "containerEnv": {
+      "DEVCONTAINER": "1"
+    },
+    "forwardPorts": [8123],
+    "mounts": [
+      "source=${localWorkspaceFolder},target=/config/www/workspace,type=bind",
+      "source=${localWorkspaceFolder}/test,target=/config/test,type=bind",
+      "source=${localWorkspaceFolder}/test/configuration.yaml,target=/config/configuration.yaml,type=bind"
+    ],
+    "runArgs": ["--env-file", "${localWorkspaceFolder}/test/.env"],
+    "extensions": [
+      "github.vscode-pull-request-github",
+      "esbenp.prettier-vscode",
+      "spmeesseman.vscode-taskexplorer"
+    ],
+    "settings": {
+      "files.eol": "\n",
+      "editor.tabSize": 2,
+      "editor.formatOnPaste": false,
+      "editor.formatOnSave": true,
+      "editor.formatOnType": true,
+      "[javascript]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
+      },
+      "[typescript]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
+      },
+      "files.trimTrailingWhitespace": true
+    }
+  }
+

.gitattributes

@@ -1 +1,2 @@
 slider-entity-row.js binary
+package-lock.json binary

.github/ISSUE_TEMPLATE/bug-report.md

@@ -1,49 +1,36 @@
 ---
 name: Bug report
 about: For reporting bugs or unexpected behavior
-title: ''
-labels: ''
-assignees: ''
+title: ""
+labels: ""
+assignees: ""
 ---
 
-My Home Assistant version: 0.XX.X
-
+My Home Assistant version: 0.XXX.X
 
 My lovelace configuration method (GUI or yaml):
 
-
 What I am doing:
 
-
 What I expected to happen:
 
-
 What happened instead:
 
-
 **Minimal** steps to reproduce:
 
-
 ```yaml
 # The least ammount of code possible to reproduce my error
 
-
-
 # End of code
 ```
 
-
 Error messages from the browser console:
 
-
 ---
 
-**By putting an X in the boxes ([ ]) below, I indicate that I:**
-
-[ ] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).
-
-[ ] Have made sure I am using the latest version of the plugin.
-
-[ ] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.
+**By putting an X in the boxes ([X]) below, I indicate that I:**
 
-[ ] Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.
+- [] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).
+- [] Have made sure I am using the latest version of the plugin.
+- [] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.
+- [] Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.

.github/issue_label_bot.yaml

@@ -0,0 +1,4 @@
+label-alias:
+  bug: 'bug'
+  feature_request: 'enhancement'
+  question: 'should-be-on-forums'

.github/pull_request_template.md

@@ -0,0 +1,7 @@
+<!--
+
+Please do not include compiled distribution files in the PR (i.e. slider-entity-row.js).
+I like to be able to know exactly what goes into those.
+/ Thomas
+
+ -->

.vscode/settings.json

@@ -0,0 +1,2 @@
+{
+}

.vscode/tasks.json

@@ -0,0 +1,32 @@
+{
+    "version": "2.0.0",
+    "tasks": [
+      {
+        "label": "npm: build",
+        "type": "npm",
+        "script": "build",
+        "problemMatcher": []
+      },
+      {
+        "label": "npm: watch",
+        "type": "npm",
+        "script": "watch",
+        "problemMatcher": [],
+        "presentation": {
+          "panel": "shared",
+          "group": "test"
+        }
+      },
+      {
+        "label": "Run hass",
+        "type": "shell",
+        "command": "sudo container launch",
+        "problemMatcher": [],
+        "presentation": {
+          "panel": "shared",
+          "group": "test"
+        }
+      }
+    ]
+  }
+

README.md

@@ -1,22 +1,16 @@
-slider-entity-row
-=================
-
-[![hacs_badge](https://img.shields.io/badge/HACS-Default-orange.svg)](https://github.com/custom-components/hacs)
+# slider-entity-row
 
 Add a slider to rows in lovelace [entities](https://www.home-assistant.io/lovelace/entities/) cards.
 
-For installation instructions [see this guide](https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins).
+## Installing
 
-Install `slider-entity-row.js` as a `module`.
+[![hacs_badge](https://img.shields.io/badge/HACS-Default-orange.svg)](https://github.com/hacs/integration)
 
-```yaml
-resources:
-  - url: /local/slider-entity-row.js
-    type: module
-```
+Install using HACS or [see this guide](https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins).
 
-## Usage
-Add this to an entities card:
+## Quick Start
+
+Add this to an [entities](https://www.home-assistant.io/lovelace/entities/) card:
 
 ```yaml
 type: entities
@@ -28,7 +22,9 @@ entities:
 
 ![slider-entity-row](https://user-images.githubusercontent.com/1299821/59467898-15b16600-8e31-11e9-9924-53b108572d3a.png)
 
-Currenly supported entity domains:
+## Usage
+
+`entity` can be an entity in one of the following domains:
 
 - `light` - set brightness
 - `media_player` - set volume
@@ -37,19 +33,35 @@ Currenly supported entity domains:
 - `fan` - set speed (assumes first setting is `off`)
 - `input_number` - set value (only if `mode: slider`)
 - `input_select` - select option
+- `number` - set value
+- `timer` - set number of seconds remaining
+
+If you want to control more than one entity with the same slider, use [light group](https://www.home-assistant.io/integrations/light.group/), [cover group](https://www.home-assistant.io/integrations/cover.group/) or a custom made [template entity](https://www.home-assistant.io/integrations/#search/template).
 
 ![domains](https://user-images.githubusercontent.com/1299821/59467899-1813c000-8e31-11e9-8abd-34c887a7db2a.png)
 
-### Options
+Available options:
+
+| Option          | Values         | Description                                                                                                                               | default  |
+| --------------- | -------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | -------- |
+| `min`           | number         | Minimum value of slider                                                                                                                   |          |
+| `max`           | number         | Maximum value of slider                                                                                                                   |          |
+| `step`          | number         | Step size of slider selection                                                                                                             |          |
+| `toggle`        | `true`/`false` | Show a toggle or mute button if possible                                                                                                  | `false`  |
+| `hide_state`    | `true`/`false` | `true`: Do not display the current state <br>`false`: Always display current state - even when the card is too narrow for it to be usable | none     |
+| `hide_when_off` | `true`/`false` | `true`: Hide slider when state is off <br>`false`: Always display slider                                                                  | `false`  |
+| `grow`          | `true`/`false` | Make the slider as wide as possible (which is really just a little bit wider)                                                             | `false`  |
+| `full_row`      | `true`/`false` | Hide the icon and name and stretch slider to full width                                                                                   | `false`  |
+| `show_icon`     | `true`/`false` | Show an icon when `full_row` is true. This icon is NOT clickable                                                                          | `false`  |
+| `attribute`     | (see below)    | Which attribute the slider should control                                                                                                 |          |
+| `colorize`      | `true`/`false` | Colorize the bar (only for some attributes)                                                                                               | `false`  |
+| `dir`           | `ltr`/`rtl`    | Use this to override your languages Right-To-Left or Left-To-Right setting                                                                | language |
+
+Most general Entities row options like `name`, `icon` and `tap_action` et.al. are also supported.
+
+![options](https://user-images.githubusercontent.com/1299821/59467902-19dd8380-8e31-11e9-9173-97c9b6be3179.png)
 
-- `toggle: true` - Show a toggle instead of current state
-- `hide_state: true` - Do not display current state
-- `hide_when_off: true` - Hide the slider when state is `off`
-- `full_row: true` - Hide icon and name and stretch slider to full width
-- `min: <value>` - Set minimum value of slider
-- `max: <value>` - Set maximum value of slider
-- `step: <value>` - Set step size of slider
-- `attribute: <value>` - Select which attribute the slider should control
+<details><summary>YAML code for screenshot above</summary>
 
 ```yaml
 type: entities
@@ -83,27 +95,33 @@ entities:
     full_row: true
 ```
 
-![options](https://user-images.githubusercontent.com/1299821/59467902-19dd8380-8e31-11e9-9173-97c9b6be3179.png)
+</details>
+
+### Attribute
 
-#### Attributes
 Currently, the following attribute settings are supported.
 
 **For `light` domain:**
 
-- `brightness` - default
+- `brightness_pct` - default
+- `brightness`
 - `color_temp`
+- `color_temp_mired`
 - `hue`
 - `saturation`
 - `red`
 - `green`
 - `blue`
 - `effect`
-- `white_value`
+- `white` - for RGBW lights only
+- `cold_white` - for RGBWW lights only
+- `warm_white` - for RGBWW lights only
 
 **For `cover` domain:**
 
 - `position` - default
 - `tilt`
 
 ---
+
 <a href="https://www.buymeacoffee.com/uqD6KHCdJ" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/white_img.png" alt="Buy Me A Coffee" style="height: auto !important;width: auto !important;" ></a>