[Dashboard CSS] Percentage in Slider Dot

🚧 Developers
1

I wanted to release this mod for dashboards. It's nice to see the percentage at a glance, sometimes.

image

All you need to do is copy/paste the following CSS into your Dashboard's custom CSS pane :slight_smile:

/* Dimmer Slider Bar */
.vue-slider-dot-handle{
width:170% !important;
border-radius: 75px !important;
margin-left: -30%!important;
box-shadow: none !important;
background-color: rgba(70,70,70);
border: 2px solid rgba(255,255,255,0.75);
}
/* Percentage Text */
.vue-slider-dot-hover:hover .vue-slider-dot-tooltip, .vue-slider-dot-tooltip-show, .vue-slider-dot-tooltip-inner{
visibility: visible !important;
color: rgba(255,255,255,0.8);
}
.vue-slider-dot-tooltip ::after{
display:none!important;
}
.vue-slider-dot-tooltip-top{
top: 95%;
left: 57%;
}
.vue-slider-dot-tooltip-inner{
background: none !important;
border: none !important;
font-size: 16px;
}
.vue-slider-dot{
    width: 30px !important;
    height: 30px !important;
}
.vue-slider-rail{
height: 3px !important;
}
.tile > .tile-contents > .tile-primary{overflow:visible !important;}.

I know I've been quiet-ish on the forums lately. Focusing on the real world :slight_smile:

21 Likes
2

I have tried to insert the code at the begining, at the end, in the middle ...
I always get the message ... Unexpected token / in JSON at position 0
when I save

3

It's not json. So I think you're in the wrong tab. Its css

1 Like
4

Thanks, your right, wrong tab

2 Likes
5

@adamkempenich

Thanks for your code, I like it !

1 Like
6

Glad you’re liking it! Maybe it could be a built-in option for tiles, one day :slight_smile:

2 Likes
7

BAM! three tiles gone. This is an incredable enhancement.
I second the motion that it be a stock-out-of-the-box feature.

1 Like
8

This is simple, and fantastic :slight_smile: :grin:

1 Like
9

I'd be interested to see how you've simplified your dashboard with this! Any before/after pics?

10

@adamkempenich. If you could only add a slider with this to the 'color bulb' tile as well. That would be Nirvana! :crossed_fingers: The more you give the more we want :smirk:

11

Are you asking for a slider on the color bulb tile itself, or this slider on the modal window that comes up when you click on a color bulb tile?

12

Yes, on the color bulb tile itself. You could then click on the tile to get to the other settings.

13

I'll look into it. Might need to make something like my Percent to ColorTemperature app to handle it. I suppose I could expand on that to handle H/S/L/CT, and sub-tiles could be added to the color bulb tiles...

As far as I know, Color Bulb tiles only have the bulb's current color/CT in the circle under the icon, and the sliders are unrelated to the div. But I'd love to be mistaken there.

1 Like
14

That'd be nice, do that :slight_smile: One thing, it is possible to overlay tiles, ie put them in the same location. Maybe you could play with that?

15

Do you not have any color bulbs? Here is a screenshot of the inside of a color bulb tile.

image
image959×527 57.7 KB

If a slider could be added to the main color bulb tile I would be able to clean up quite a few dashboards.

16

Possibly. I'd have to see how the boundaries of the tiles can be modified.

Way too many, I just don't use the color bulb template in dashboards ... :laughing: I'll see what I can do for this.

1 Like
17

It is possible, it wasn't a question;) Just change the location of the tiles to the same position. This can be done in the JSON.

1 Like
18

Right—I will think all of this over :slight_smile:

19

Do so, it was just a hint on what can be done, what or if you do something with it, is of course up to you :slight_smile:

1 Like
20

works awesome thanks

1 Like