├── .gitignore ├── README.md ├── hacs.json ├── slider-card-captures ├── colors-height.JPG ├── default.JPG ├── ha-slider-card-demo.gif ├── my-use-case.JPG ├── no-thumb.JPG ├── switch-lock-example.gif ├── thumb-colors-change.gif ├── thumb-colors-height.JPG └── thumb-padding-2.JPG └── slider-card.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | 3 | package-lock.json 4 | yarn.lock 5 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # slider-card 2 | 3 | ## ARCHIVED!!! 4 | 5 | This repo is not being updated anymore. Find the updated cards here: https://github.com/AnthonMS/my-cards 6 | 7 | This will be rolled back to have the cloud dependant version of the card. 8 | 9 | ## Breaking changes in latest version! 10 | 11 | The card is now named "my-slider". So you'll have to change this in your setup after installing the new version. 12 | The new version has made it so the card is not cloud dependant any longer. LitElement is compiled directly into the code now. 13 | 14 | ## Description 15 | 16 | Slider Card is a customizable card for light, input_number, covers, fans, switches, locks & media_player volume_level entity sliders, for the Home Assistant Lovelace frontend. 17 | **Please read the notes at the bottom of this readme, there are some important styling tips, because the padding on the thumb works in mysterious ways (Using border styling)** 18 | Everything under function in the options table is css styling, so it is possible to use any of the supported ways of setting styles. For example for width, height and paddings you can use '%', 'px', 'rem' and so on. And the same for colors, you can use hex, rgb and named. 19 | 20 | ### Features 21 | - Customizable slider card for lights, input_numbers, media_players, covers, fans, switches, and locks 22 | - It can handle both brightness and warmth of light 23 | - It can handle custom min, max and step for input_number 24 | - It will toggle switches and locks when slid (slide-to-unlock style) 25 | 26 | ### Future features (Maybe) 27 | - Customizable Percentage Text inside slider. 28 | - Multiple entities (Right now you can only put one light entity in each card). 29 | - **If you would like a new feature, please feel free to create an issue asking for it.** 30 | 31 | ### My Setup Using This 32 | 33 | ![Example Setup](/slider-card-captures/my-use-case.JPG) 34 | 35 | ### Demo 36 | ![Example](/slider-card-captures/ha-slider-card-demo.gif) 37 | 38 | ## Options 39 | | Name | Type | Default | Description | 40 | | ---- | ---- | ------- | ----------- | 41 | | type | string | **Required** | `custom:my-slider` | 42 | | entity | string | **Required** | `light.living_room` | 43 | |minBar| int | 0 | Set minimum value slider bar will display for `media_player`, `fan`, and `cover` entities | 44 | |maxBar| int | 100 | Set maximum value slider bar will display for `media_player`, `fan`, and `cover` entities | 45 | |minSet| int | 0 | Set minimum value entity can change | 46 | |maxSet| int | 100 | Set maximum value entity can change | 47 | | step | string | "1" | Number of steps to take (For input number, if step is not specified, it will use step from attributes.) (For media_player, if step is not specified it will step by 0.01. (It will actually step by 1, but it will convert 27 to 0.27. So if you set a custom step, set it between 0 and 100.)) | 48 | | radius | string | "4px" | Border radius of slider. | 49 | | function | string | "Brightness" | Function of the slider (Brightness/Warmth) | 50 | | width | string | 100% | Width of slider | 51 | | height | string | 50px | Height of slider | 52 | | top | string | 0px | Top position of slider | 53 | | bottom | string | 0px | Bottom position of slider | 54 | | right | string | 0px | Right position of slider | 55 | | left | string | 0px | Left position of slider | 56 | | rotate | string | 0 | Rotation in degrees. Just put 90, if you want to rotate it 90 degrees | 57 | | containerHeight | string | 50px | Height of container slider is in. This is used if you want vertical slider | 58 | | mainSliderColor | string | var(--accent-color) | Main color of slider | 59 | | mainSliderColorOff | string | #636363 | Main color of slider when inactive | 60 | | secondarySliderColor | string | #4d4d4d | Secondary color of slider | 61 | | secondarySliderColorOff | string | #4d4d4d | Secondary color of slider when inactive | 62 | | thumbWidth | string | 25px | Width of thumb | 63 | | thumbHeight | string | 80px | Height of thumb | 64 | | thumbColor | string | #FFFFFF | Color of thumb | 65 | | thumbColorOff | string | #969696 | Color of thumb when inactive | 66 | | thumbHorizontalPadding | string | 10px | Horizontal padding of the thumb | 67 | | thumbVerticalPadding | string | 20px | Vertical padding of thumb | 68 | 69 | ## Installation 70 | ### HACS 71 | 1. Add this repo to HACS 72 | 2. Install 73 | 3. Add something in the line of this to the configuration: 74 | ```yaml 75 | - url: /hacsfiles/ha-slider-card/my-slider.js 76 | type: module 77 | ``` 78 | 79 | ### Manually 80 | 1. Download my-slider.js located in dist/ directory 81 | 2. Place it in your HA www/ directory 82 | 3. Add something in the line of this to the configuration: 83 | ```yaml 84 | - url: /local/my-slider.js 85 | type: module 86 | ``` 87 | 88 | ## Examples 89 | 90 | #### Default 91 | 92 | ```yaml 93 | cards: 94 | - type: custom:my-slider 95 | entity: light.example 96 | ``` 97 | 98 | #### Adjust Warmth of Light 99 | 100 | ```yaml 101 | cards: 102 | - type: custom:my-slider 103 | entity: light.example 104 | function: "Warmth" 105 | ``` 106 | 107 | #### use for Input Number 108 | 109 | ```yaml 110 | cards: 111 | - type: custom:my-slider 112 | entity: input_number.example 113 | ``` 114 | 115 | ```yaml 116 | cards: 117 | - type: custom:my-slider 118 | entity: input_number.example 119 | step: "10" 120 | ``` 121 | 122 | ![Default Slider Config](/slider-card-captures/default.JPG) 123 | 124 | #### Change Slider Height and Colors 125 | 126 | ```yaml 127 | cards: 128 | - type: custom:my-slider 129 | entity: light.dinner_table_light 130 | height: '30px' 131 | mainSliderColor: 'green' 132 | secondarySliderColor: 'red' 133 | ``` 134 | 135 | ![Change Slider Height and Colors Config](/slider-card-captures/colors-height.JPG) 136 | 137 | #### Change Thumb Size and Colors 138 | 139 | ```yaml 140 | cards: 141 | - type: custom:my-slider 142 | entity: light.dinner_table_light 143 | height: '30px' 144 | mainSliderColor: 'blue' 145 | secondarySliderColor: 'darkblue' 146 | thumbWidth: '25px' 147 | thumbHeight: '60px' 148 | thumbColor: 'black' 149 | ``` 150 | 151 | ![Change Thumb Height and Colors Config](/slider-card-captures/thumb-colors-height.JPG) 152 | 153 | #### Change Thumb Padding and Size 154 | 155 | ```yaml 156 | cards: 157 | ########### LEFT SLIDER ############ 158 | - type: custom:my-slider 159 | entity: light.dinner_table_light 160 | height: '30px' 161 | mainSliderColor: 'green' 162 | secondarySliderColor: 'red' 163 | thumbWidth: '0px' 164 | thumbHeight: '30px' 165 | thumbColor: 'pink' 166 | thumbHorizontalPadding: '0px' 167 | thumbVerticalPadding: '0px' 168 | 169 | ########### RIGHT SLIDER ############ 170 | - type: custom:my-slider 171 | entity: light.sofa_light 172 | height: '30px' 173 | mainSliderColor: 'blue' 174 | secondarySliderColor: 'darkblue' 175 | thumbWidth: '5px' 176 | thumbHeight: '30px' 177 | thumbColor: 'black' 178 | thumbHorizontalPadding: '0px' 179 | thumbVerticalPadding: '0px' 180 | 181 | ``` 182 | 183 | ![Change Thumb Height and Colors Config](/slider-card-captures/thumb-padding-2.JPG) 184 | 185 | #### Change Active and Inactive Colors Config 186 | 187 | ```yaml 188 | cards: 189 | - type: custom:my-slider 190 | entity: light.dinner_table_light 191 | mainColor: red 192 | mainColorOff: darkred 193 | secondarySliderColor: blue 194 | secondarySliderColorOff: darkblue 195 | thumbColor: white 196 | thumbColorOff: black 197 | ``` 198 | 199 | ![Change Active and Inactive Colors Config](/slider-card-captures/thumb-colors-change.gif) 200 | 201 | #### Using a `Switch` or `Lock` 202 | 203 | By adjusting the maxSet you can adjust when a release causes the entity to be toggled. 204 | In this example the user would only need to slide 70% of the way to activate this lock 205 | 206 | ```yaml 207 | cards: 208 | - type: custom:my-slider 209 | entity: lock.lock 210 | maxSet: 70 211 | ``` 212 | 213 | 214 | 215 | ![Change Active and Inactive Colors Config](/slider-card-captures/switch-lock-example.gif) 216 | ### NOTE 217 | 218 | When changing the padding of the thumb. If you want for example padding on the sides (horizontal) you will have to triple the width of the thumb itself, this has something to do with the border styling. There is possibly a way around this, if I use some more time on the styling, but for now, this will have to do, since it serves the purpose I need it for. Plus if you just keep this in mind, there should be no trouble. But play around with it. This includes when wanting padding on top/bottom (vertical), you will have to change height of the thumb. 219 | 220 | For the colors, you can use HEX colors ('#111111'), color names supported by CSS ('red', 'blue', 'black', etc.) and I assume you can also use rgb ('rgb(255, 255, 255)') and rgba ('rgba(255, 255, 255, 0.5)'). rgba is used when you want to change the opacity, this is the last number in the comma seperated list, where 1 is full opacity and 0 is full transparency. 221 | 222 | 223 | 224 | 225 | 226 | 227 | 228 | ## Setup Dev Environment 229 | 230 | 1. Clone the repository down on your work PC. 231 | 2. Run `npm install` in the project root directory. 232 | 3. Serve it by running `npm start` 233 | 4. Build it by running `npm run build` 234 | 5. Add this to your Home Assistant Configuration (IP is the local IP of the machine you're hosting the card on): 235 | ```yaml 236 | - url: http://:5000/my-slider.js?v=001 237 | type: module 238 | ``` 239 | -------------------------------------------------------------------------------- /hacs.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Slider Card", 3 | "filename": "slider-card.js", 4 | "content_in_root": true, 5 | "render_readme": true, 6 | "domains": ["media_player", "light", "fan", "cover", "input_number"] 7 | } 8 | -------------------------------------------------------------------------------- /slider-card-captures/colors-height.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonMS/ha-slider-card/5b924a9ce6194ec729ce12f6cba03583490176e4/slider-card-captures/colors-height.JPG -------------------------------------------------------------------------------- /slider-card-captures/default.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonMS/ha-slider-card/5b924a9ce6194ec729ce12f6cba03583490176e4/slider-card-captures/default.JPG -------------------------------------------------------------------------------- /slider-card-captures/ha-slider-card-demo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonMS/ha-slider-card/5b924a9ce6194ec729ce12f6cba03583490176e4/slider-card-captures/ha-slider-card-demo.gif -------------------------------------------------------------------------------- /slider-card-captures/my-use-case.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonMS/ha-slider-card/5b924a9ce6194ec729ce12f6cba03583490176e4/slider-card-captures/my-use-case.JPG -------------------------------------------------------------------------------- /slider-card-captures/no-thumb.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonMS/ha-slider-card/5b924a9ce6194ec729ce12f6cba03583490176e4/slider-card-captures/no-thumb.JPG -------------------------------------------------------------------------------- /slider-card-captures/switch-lock-example.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonMS/ha-slider-card/5b924a9ce6194ec729ce12f6cba03583490176e4/slider-card-captures/switch-lock-example.gif -------------------------------------------------------------------------------- /slider-card-captures/thumb-colors-change.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonMS/ha-slider-card/5b924a9ce6194ec729ce12f6cba03583490176e4/slider-card-captures/thumb-colors-change.gif -------------------------------------------------------------------------------- /slider-card-captures/thumb-colors-height.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonMS/ha-slider-card/5b924a9ce6194ec729ce12f6cba03583490176e4/slider-card-captures/thumb-colors-height.JPG -------------------------------------------------------------------------------- /slider-card-captures/thumb-padding-2.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonMS/ha-slider-card/5b924a9ce6194ec729ce12f6cba03583490176e4/slider-card-captures/thumb-padding-2.JPG -------------------------------------------------------------------------------- /slider-card.js: -------------------------------------------------------------------------------- 1 | import { 2 | LitElement, 3 | html, 4 | css 5 | } from "https://unpkg.com/lit-element@2.0.1/lit-element.js?module"; 6 | class SliderCard extends LitElement { 7 | 8 | static get properties() { 9 | return { 10 | hass: {}, 11 | config: {}, 12 | active: {} 13 | }; 14 | } 15 | 16 | constructor() { 17 | super(); 18 | // console.log("SLIDER-CARD V36 INSTALLED--------------------------------------------------------------"); 19 | } 20 | 21 | render() { 22 | // Size Variables 23 | var minBar = this.config.minBar ? this.config.minBar : 0; 24 | var maxBar = this.config.maxBar ? this.config.maxBar : 100; 25 | var minSet = this.config.minSet ? this.config.minSet : 0; 26 | var maxSet = this.config.maxSet ? this.config.maxSet : 100; 27 | var width = this.config.width ? this.config.width : "100%"; 28 | var height = this.config.height ? this.config.height : "50px"; 29 | var radius = this.config.radius ? this.config.radius : "4px"; 30 | var top = this.config.top ? this.config.top : "0px"; 31 | var bottom = this.config.bottom ? this.config.bottom : "0px"; 32 | var right = this.config.right ? this.config.right : "0px"; 33 | var left = this.config.left ? this.config.left : "0px"; 34 | var rotate = this.config.rotate ? this.config.rotate : "0"; 35 | var containerHeight = this.config.containerHeight ? this.config.containerHeight : height; 36 | if (rotate != "0") { 37 | rotate = rotate + "deg"; 38 | } 39 | // Slider Background Color Variables 40 | var mainSliderColor = this.config.mainSliderColor ? this.config.mainSliderColor : "var(--accent-color)"; 41 | var secondarySliderColor = this.config.secondarySliderColor ? this.config.secondarySliderColor : "#4d4d4d"; 42 | var mainSliderColorOff = this.config.mainSliderColorOff ? this.config.mainSliderColorOff : "#636363"; 43 | var secondarySliderColorOff = this.config.secondarySliderColorOff ? this.config.secondarySliderColorOff : "#4d4d4d"; 44 | var border = this.config.border ? this.config.border : "0"; 45 | // Slider Thumb Variables 46 | var thumbWidth = this.config.thumbWidth ? this.config.thumbWidth : "25px"; 47 | var thumbHeight = this.config.thumbHeight ? this.config.thumbHeight : "80px"; 48 | var thumbColor = this.config.thumbColor ? this.config.thumbColor : "#FFFFFF"; 49 | var thumbColorOff = this.config.thumbColorOff ? this.config.thumbColorOff : "#969696"; 50 | var thumbHorizontalPadding = this.config.thumbHorizontalPadding ? this.config.thumbHorizontalPadding : "10px"; 51 | var thumbVerticalPadding = this.config.thumbVerticalPadding ? this.config.thumbVerticalPadding : "20px"; 52 | var thumbTop = this.config.thumpTop ? this.config.thumpTop : "calc((var(--slider-width) - var(--thumb-height)) / 2)"; 53 | var thumbBorderRight = this.config.thumbBorderRight ? this.config.thumbBorderRight : "var(--thumb-horizontal-padding) solid var(--slider-main-color)"; 54 | var thumbBorderLeft = this.config.thumbBorderLeft ? this.config.thumbBorderLeft : "var(--thumb-horizontal-padding) solid var(--slider-main-color)"; 55 | var thumbBorderTop = this.config.thumbBorderTop ? this.config.thumbBorderTop : "var(--thumb-vertical-padding) solid var(--slider-main-color)"; 56 | var thumbBorderBotton = this.config.thumbBorderBotton ? this.config.thumbBorderBotton : "var(--thumb-vertical-padding) solid var(--slider-main-color)"; 57 | // top: calc((var(--slider-width) - var(--thumb-height)) / 2); 58 | // border-right: var(--thumb-horizontal-padding) solid var(--slider-main-color); 59 | // border-left: var(--thumb-horizontal-padding) solid var(--slider-main-color); 60 | // border-top: var(--thumb-vertical-padding) solid var(--slider-main-color); 61 | // border-bottom: var(--thumb-vertical-padding) solid var(--slider-main-color); 62 | 63 | 64 | var entity = this.config.entity; 65 | var entityClass = this.hass.states[entity] 66 | 67 | var isLight = false; 68 | var isInputNumber = false; 69 | var isMediaPlayer = false; 70 | var isCover = false; 71 | var isFan = false; 72 | var isSwitch = false; 73 | var isLock = false; 74 | 75 | // Check if entity is light or input_number 76 | if (this.config.entity.includes("light.")) { 77 | isLight = true; 78 | var step = this.config.step ? this.config.step : "1"; 79 | } 80 | else if (this.config.entity.includes("input_number.")) { 81 | isInputNumber = true; 82 | var step = this.config.step ? this.config.step : entityClass.attributes.step; 83 | } 84 | else if (this.config.entity.includes("media_player.")) { 85 | isMediaPlayer = true; 86 | var step = this.config.step ? this.config.step : "1"; 87 | } 88 | else if (this.config.entity.includes("cover.")) { 89 | isCover = true; 90 | var step = this.config.step ? this.config.step : "1"; 91 | } 92 | else if (this.config.entity.includes("fan.")) { 93 | isFan = true; 94 | var step = this.config.step ? this.config.step : "1"; 95 | } 96 | else if (this.config.entity.includes("switch.")) { 97 | isSwitch = true; 98 | var step = this.config.step ? this.config.step : "1"; 99 | } 100 | else if (this.config.entity.includes("lock.")) { 101 | isLock = true; 102 | var step = this.config.step ? this.config.step : "1"; 103 | } 104 | 105 | var styleStr = ` 106 | --slider-width: ${width}; 107 | --slider-width-inverse: -${width}; 108 | --slider-height: ${height}; 109 | --slider-main-color: ${(entityClass.state === "off" || entityClass.state === "locked" || entityClass.state == undefined) ? "var(--slider-main-color-off)" : "var(--slider-main-color-on)"}; 110 | --slider-main-color-on: ${mainSliderColor}; 111 | --slider-main-color-off: ${mainSliderColorOff}; 112 | --slider-secondary-color: ${(entityClass.state === "off" || entityClass.state === "locked" || entityClass.state == undefined) ? "var(--slider-secondary-color-off)" : "var(--slider-secondary-color-on)"}; 113 | --slider-secondary-color-on: ${secondarySliderColor}; 114 | --slider-secondary-color-off: ${secondarySliderColorOff}; 115 | --slider-radius: ${radius}; 116 | --border: ${border}; 117 | 118 | --thumb-width: ${thumbWidth}; 119 | --thumb-height: ${thumbHeight}; 120 | --thumb-color: ${(entityClass.state === "off" || entityClass.state == undefined) ? "var(--thumb-color-off)" : "var(--thumb-color-on)"}; 121 | --thumb-color-on: ${thumbColor}; 122 | --thumb-color-off: ${thumbColorOff}; 123 | --thumb-horizontal-padding: ${thumbHorizontalPadding}; 124 | --thumb-vertical-padding: ${thumbVerticalPadding}; 125 | 126 | --rotate: ${rotate}; 127 | --top: ${top}; 128 | --bottom: ${bottom}; 129 | --right: ${right}; 130 | --left: ${left}; 131 | --container-height: ${containerHeight}; 132 | --thumb-top: ${thumbTop}; 133 | --thumb-border-right: ${thumbBorderRight}; 134 | --thumb-border-left: ${thumbBorderLeft}; 135 | --thumb-border-top: ${thumbBorderTop}; 136 | --thumb-border-bottom: ${thumbBorderBotton}; 137 | `; 138 | 139 | if (isLight) { 140 | if (this.config.function == "Warmth") { 141 | return html` 142 | 143 |
144 | this._setWarmth(entityClass, e.target, minSet, maxSet)}> 145 |
146 | 147 | `; 148 | } 149 | else { 150 | return html` 151 | 152 |
153 | this._setBrightness(entityClass, e.target, minSet, maxSet)}> 154 |
155 | 156 | `; 157 | } 158 | } 159 | 160 | if (isInputNumber) { 161 | return html` 162 | 163 |
164 | this._setInputNumber(entityClass, e.target, minSet, maxSet)}> 165 |
166 | 167 | `; 168 | } 169 | 170 | if (isMediaPlayer) { 171 | var num = 0; 172 | if (entityClass.attributes.volume_level != undefined) { 173 | var num = Number(entityClass.attributes.volume_level * 100) 174 | } 175 | 176 | return html` 177 | 178 |
179 | this._setMediaVolume(entityClass, e.target, minSet, maxSet)}> 180 |
181 | 182 | `; 183 | } 184 | 185 | if (isCover) { 186 | return html` 187 | 188 |
189 | this._setCover(entityClass, e.target, minSet, maxSet)}> 190 |
191 | 192 | `; 193 | } 194 | 195 | if (isFan) { 196 | return html` 197 | 198 |
199 | this._setFan(entityClass, e.target, minSet, maxSet)}> 200 |
201 | 202 | `; 203 | } 204 | 205 | if (isSwitch) { 206 | return html` 207 | 208 |
209 | this._setSwitch(entityClass, e.target, minSet, maxSet, minBar, maxBar)}> 210 |
211 | 212 | `; 213 | } 214 | 215 | if (isLock) { 216 | return html` 217 | 218 |
219 | this._setLock(entityClass, e.target, minSet, maxSet, minBar, maxBar)}> 220 |
221 | 222 | `; 223 | } 224 | } 225 | 226 | 227 | updated() { } 228 | 229 | 230 | _setFan(entityClass, target, minSet, maxSet) { 231 | var value = target.value; 232 | if (value > maxSet) { 233 | var value = maxSet; 234 | } else if (value < minSet) { 235 | var value = minSet; 236 | } 237 | 238 | this.hass.callService("fan", "set_percentage", { 239 | entity_id: entityClass.entity_id, 240 | percentage: value 241 | }); 242 | 243 | target.value = value; 244 | } 245 | 246 | _setCover(entityClass, target, minSet, maxSet) { 247 | var value = target.value; 248 | if (value > maxSet) { 249 | var value = maxSet; 250 | } else if (value < minSet) { 251 | var value = minSet; 252 | } 253 | // console.log("Setting Cover to: " + value); 254 | // console.log("From Position: " + entityClass.attributes.current_position); 255 | this.hass.callService("cover", "set_cover_position", { 256 | entity_id: entityClass.entity_id, 257 | position: value 258 | }); 259 | 260 | target.value = value; 261 | } 262 | 263 | _setMediaVolume(entityClass, target, minSet, maxSet) { 264 | var value = target.value; 265 | if (value > maxSet) { 266 | var value = maxSet; 267 | } else if (value < minSet) { 268 | var value = minSet; 269 | } 270 | 271 | this.hass.callService("media_player", "volume_set", { 272 | entity_id: entityClass.entity_id, 273 | volume_level: value / 100 274 | }); 275 | 276 | target.value = value; 277 | } 278 | 279 | _setInputNumber(entityClass, number, minSet, maxSet) { 280 | var value = target.value; 281 | if (value > maxSet) { 282 | var value = maxSet; 283 | } else if (value < minSet) { 284 | var value = minSet; 285 | } 286 | 287 | this.hass.callService("input_number", "set_value", { 288 | entity_id: entityClass.entity_id, 289 | value: value 290 | }); 291 | 292 | target.value = value; 293 | } 294 | 295 | _setBrightness(entityClass, target, minSet, maxSet) { 296 | var value = target.value; 297 | if (value > maxSet) { 298 | var value = maxSet; 299 | } else if (value < minSet) { 300 | var value = minSet; 301 | } 302 | 303 | this.hass.callService("homeassistant", "turn_on", { 304 | entity_id: entityClass.entity_id, 305 | brightness: value * 2.55 306 | }); 307 | 308 | // console.dir(this) 309 | target.value = value; 310 | 311 | } 312 | 313 | _setWarmth(entityClass, target, minSet, maxSet) { 314 | var value = target.value; 315 | if (value > maxSet) { 316 | var value = maxSet; 317 | } else if (value < minSet) { 318 | var value = minSet; 319 | } 320 | 321 | this.hass.callService("homeassistant", "turn_on", { 322 | entity_id: entityClass.entity_id, 323 | color_temp: value 324 | }); 325 | 326 | target.value = value; 327 | } 328 | 329 | _setSwitch(entityClass, target, minSet, maxSet, minBar, maxBar) { 330 | var value = target.value; 331 | var threshold = Math.min(maxSet, maxBar) //pick lesser of the two 332 | if (Number(threshold) <= value) { 333 | this.hass.callService("homeassistant", "toggle", { 334 | entity_id: entityClass.entity_id 335 | }); 336 | } 337 | 338 | target.value = Number(Math.max(minSet, minBar)); 339 | } 340 | 341 | _setLock(entityClass, target, minSet, maxSet, minBar, maxBar) { 342 | var value = target.value; 343 | var threshold = Math.min(maxSet, maxBar) //pick lesser of the two 344 | if (Number(threshold) <= value) { 345 | var newLockState = entityClass.state === "locked" ? 'unlock' : 'lock' 346 | this.hass.callService("lock", newLockState, { 347 | entity_id: entityClass.entity_id 348 | }); 349 | } 350 | 351 | target.value = Number(Math.max(minSet, minBar)); 352 | } 353 | 354 | _switch(entityClass) { 355 | this.hass.callService("homeassistant", "toggle", { 356 | entity_id: entityClass.entity_id 357 | }); 358 | } 359 | 360 | _navigate(path) { 361 | window.location.href = path; 362 | } 363 | 364 | setConfig(config) { 365 | if (!config.entity) { 366 | throw new Error("You need to define entity"); 367 | } 368 | 369 | if (!config.entity.includes("input_number.") && !config.entity.includes("light.") && !config.entity.includes("media_player.") && !config.entity.includes("cover.") && !config.entity.includes("fan.") && !config.entity.includes("switch.") && !config.entity.includes("lock.")) { 370 | throw new Error("Entity has to be a light, input_number, media_player, cover or a fan."); 371 | } 372 | 373 | this.config = config; 374 | } 375 | 376 | getCardSize() { 377 | return 0; 378 | } 379 | 380 | // -webkit-transform: rotate(270deg); 381 | // -moz-transform: rotate(270deg); 382 | // -o-transform: rotate(270deg); 383 | // -ms-transform: rotate(270deg); 384 | // transform: rotate(270deg); 385 | static get styles() { 386 | return css` 387 | .slider-container { 388 | height: var(--container-height); 389 | position: relative; 390 | overflow: hidden; 391 | border-radius: var(--slider-radius); 392 | } 393 | 394 | .slider-container input[type="range"] { 395 | outline: 0; 396 | border: var(--border); 397 | width: var(--slider-width); 398 | height: var(--slider-height); 399 | border-radius: var(--slider-radius); 400 | background-color: var(--slider-secondary-color); /*Remaining Slider color*/ 401 | margin: 0; 402 | transition: box-shadow 0.2s ease-in-out; 403 | overflow: hidden; 404 | -webkit-appearance: none; 405 | position: absolute; 406 | top: var(--top); 407 | bottom: var(--bottom); 408 | right: var(--right); 409 | left: var(--left); 410 | -webkit-transform: rotate(var(--rotate)); 411 | -moz-transform: rotate(var(--rotate)); 412 | -o-transform: rotate(var(--rotate)); 413 | -ms-transform: rotate(var(--rotate)); 414 | transform: rotate(var(--rotate)); 415 | } 416 | 417 | .slider-container input[type="range"]::-webkit-slider-runnable-track { 418 | height: var(--slider-height); 419 | -webkit-appearance: none; 420 | color: var(--slider-main-color); 421 | transition: box-shadow 0.2s ease-in-out; 422 | } 423 | 424 | .slider-container input[type="range"]::-webkit-slider-thumb { 425 | width: var(--thumb-width); 426 | height: var(--thumb-height); 427 | -webkit-appearance: none; 428 | cursor: ew-resize; 429 | border-radius: 0; 430 | transition: box-shadow 0.2s ease-in-out; 431 | position: relative; 432 | 433 | box-shadow: -3500px 0 0 3500px var(--slider-main-color), inset 0 0 0 25px var(--thumb-color); 434 | 435 | top: var(--thumb-top); 436 | border-right: var(--thumb-border-right); 437 | border-left: var(--thumb-border-left); 438 | border-top: var(--thumb-border-top); 439 | border-bottom: var(--thumb-border-bottom); 440 | } 441 | 442 | .slider-container input[type=range]::-moz-range-thumb { 443 | width: calc(var(--thumb-width) / 4); 444 | height: calc(var(--thumb-height) / 2); 445 | box-shadow: -3500px 10px 0 3500px var(--slider-main-color), inset 0 0 0 25px var(--thumb-color); 446 | top: var(--thumb-top); 447 | cursor: ew-resize; 448 | border-radius: 0; 449 | transition: box-shadow 0.2s ease-in-out; 450 | position: relative; 451 | border-radius: 0; 452 | border-right: var(--thumb-border-right); 453 | border-left: var(--thumb-border-left); 454 | border-top: var(--thumb-border-top); 455 | border-bottom: var(--thumb-border-bottom); 456 | } 457 | 458 | .slider-container input[type="range"]::-webkit-slider-thumb:hover { 459 | cursor: default; 460 | } 461 | 462 | .slider-container input[type="range"]:hover { 463 | cursor: default; 464 | } 465 | `; 466 | } 467 | 468 | } 469 | 470 | customElements.define('slider-card', SliderCard); 471 | --------------------------------------------------------------------------------