# How to create a gauge like this **URL:** \ **Category:** Ignition\ **Created:** [June 13, 2022, 7:37pm UTC](https://forum.inductiveautomation.com/t/how-to-create-a-gauge-like-this/60715 "2022-06-13T19:37:27Z")\ **Posts on this page:** 14\ **Page:** 1
**Author:** ![Aiasa21](https://avatars.discourse-cdn.com/v4/letter/a/aeb1de/32.png) [@Aiasa21](https://forum.inductiveautomation.com/u/Aiasa21)\ **Post date:** [June 13, 2022, 7:37pm UTC](https://forum.inductiveautomation.com/t/how-to-create-a-gauge-like-this/60715/1 "2022-06-13T19:37:27Z")
Hi guys, I’m trying to understand how is possible to create a gauge like this. I create the background using css code, but I have no idea about how to create the transition of the gauge and the button to move around it. Thanks for the help! ![Immagine 2022-06-13 210130](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/7/47745b75c9f959ee7c993aaad27a6d51fed0914a.png) ---
**Author:** ![kgamble](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kgamble/32/8019_2.png) [@kgamble](https://forum.inductiveautomation.com/u/kgamble)\ **Post date:** [June 13, 2022, 7:49pm UTC](https://forum.inductiveautomation.com/t/how-to-create-a-gauge-like-this/60715/2 "2022-06-13T19:49:36Z")
Are you talking about in Perspective or Vision? Based off your mention of CSS, I am guessing Perspective. I don’t have an immediate answer without having to dig into module development territory, but @nader.chinichian may have an idea. Also would this include the ability for the user to interact with it? Or is it purely a read-only gauge? ---
**Author:** ![kgamble](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kgamble/32/8019_2.png) [@kgamble](https://forum.inductiveautomation.com/u/kgamble)\ **Post date:** [June 13, 2022, 8:50pm UTC](https://forum.inductiveautomation.com/t/how-to-create-a-gauge-like-this/60715/3 "2022-06-13T20:50:34Z")
I actually realized that this could be done through creating the SVG and then using some fancy transforms to move the pointer around. I just also am not an expert there. ---
**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\ **Post date:** [June 13, 2022, 9:31pm UTC](https://forum.inductiveautomation.com/t/how-to-create-a-gauge-like-this/60715/4 "2022-06-13T21:31:30Z")
I question the usefulness of the gauge. I’ve looked at it for \> 20 s and still am not sure if it’s a gauge or a setpoint control and what the “finger knob” represents. I think there are much clearer gauges than that and if that is part of a group of such components I think your display would be very difficult to read and interpret. Linear indicators are much easier to interpret and compare than rotary. Clarity \>\> cool looking. ---
**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\ **Post date:** [June 13, 2022, 11:45pm UTC](https://forum.inductiveautomation.com/t/how-to-create-a-gauge-like-this/60715/5 "2022-06-13T23:45:25Z")
For dragging handler you have to use module creation bit for other part yes SVG and CSS is more than enough. Dragging 8s something that is impossible to do by python with decent performance. ---
**Author:** ![Aiasa21](https://avatars.discourse-cdn.com/v4/letter/a/aeb1de/32.png) [@Aiasa21](https://forum.inductiveautomation.com/u/Aiasa21)\ **Post date:** [June 14, 2022, 6:11am UTC](https://forum.inductiveautomation.com/t/how-to-create-a-gauge-like-this/60715/6 "2022-06-14T06:11:48Z")
> [@kgamble](#): > > Are you talking about in Perspective or Vision? I'm sorry, yes I'm talking about Perspective. The picture is about an App of a known brand, I didn't want to insert the full picture because I don't know if is allowed. However in the top is shown the setpoint and I guess that the cursor is to increase/decrease it. In the middle I guess there is the actual value. > [@Transistor](#): > > Clarity \>\> cool looking Yes you are right, I'm playing with a home app to manage the temperature and it looks nice, but if is too difficult (or as you say not too clear) I guess that is the case to change approach. @nader.chinichian, first of all I congratulate you for your home automation project, is simply amazing. It start to be complicated at this point, I have to decide another nice way to manage the setpoint. ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [June 14, 2022, 6:44am UTC](https://forum.inductiveautomation.com/t/how-to-create-a-gauge-like-this/60715/7 "2022-06-14T06:44:56Z")
Would quite a bit of work if its just for a home project how about a slider? [https://docs.inductiveautomation.com/display/DOC81/Perspective+-+Slider](https://docs.inductiveautomation.com/display/DOC81/Perspective+-+Slider) ---
**Author:** ![Aiasa21](https://avatars.discourse-cdn.com/v4/letter/a/aeb1de/32.png) [@Aiasa21](https://forum.inductiveautomation.com/u/Aiasa21)\ **Post date:** [June 14, 2022, 8:21am UTC](https://forum.inductiveautomation.com/t/how-to-create-a-gauge-like-this/60715/8 "2022-06-14T08:21:26Z")
> [@victordcq](#): > > Would quite a bit of work if its just for a home project > how about a slider? > [https://docs.inductiveautomation.com/display/DOC81/Perspective+-+Slider](https://docs.inductiveautomation.com/display/DOC81/Perspective+-+Slider) I'm just looking about it! It could be a good compromise. About the slider, probably I'm looking in the wrong place but I can't find a soluzione here in the forum... In the menu "labels" there's no "style" to change the it. I see that there's the style property outside the "labels" but if I change it (for example the size of the font, nothing change; instead if I change the fontFamily or the fontWeight the labels changes. For example I change the fontSize to 100 and it's not working ![Annotation 2022-06-14 101922](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/0/f0a4f286835526543eedf3892205c2bb0a1aa7c3.png) ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [June 14, 2022, 8:36am UTC](https://forum.inductiveautomation.com/t/how-to-create-a-gauge-like-this/60715/9 "2022-06-14T08:36:49Z")
does seem like it doesnt work. you can inject this into a styleclass, isnt to hard: note it will be for every slider in the gateway, but i guess that wont matter for you. paste this into the backgroundimage prop of a new styleclass `}.ia-slider .slider-mark-text { font-size: 30px !important;}{` ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/3/8397e7d59be9724421d46db75966b24e0b1f86fd.png) ---
**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\ **Post date:** [June 14, 2022, 9:13am UTC](https://forum.inductiveautomation.com/t/how-to-create-a-gauge-like-this/60715/10 "2022-06-14T09:13:21Z")
If you need it to apply only to this particular slider, you can select the style class you’re making instead of the general slider element. You’ll need to prefix it with `psc-` though: `} .psc-sliderSize .slider-mark-text { font-size: 30px !important;}{` ---
**Author:** ![Aiasa21](https://avatars.discourse-cdn.com/v4/letter/a/aeb1de/32.png) [@Aiasa21](https://forum.inductiveautomation.com/u/Aiasa21)\ **Post date:** [June 14, 2022, 2:19pm UTC](https://forum.inductiveautomation.com/t/how-to-create-a-gauge-like-this/60715/11 "2022-06-14T14:19:47Z")
Thank you guys for the help, I’m not good with perspective, I’ve started to use it a few day ago. Using this code in a NewStyle it works `}.ia-slider .slider-mark-text { font-size: 30px !important;}{` About this ```auto } .psc-sliderSize .slider-mark-text { font-size: 30px !important;}{ ``` I tryied to add it in the same NewStyle and call under the menu **style \> classes** the name NewStyle but probably I’m wrong. Another question about the slider, is possibile to increment the size of the line and the dot? I’m sure I’m looking in the wrong place, but I really can’t find any properties about it. ---
**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\ **Post date:** [June 14, 2022, 2:30pm UTC](https://forum.inductiveautomation.com/t/how-to-create-a-gauge-like-this/60715/12 "2022-06-14T14:30:20Z")
> [@Aiasa21](#): > > I tryied to add it in the same NewStyle and call under the menu **style \> classes** the name NewStyle but probably I’m wrong. That's because the name of your style and the selector don't match. In the example I gave, the name of the class was `sliderSize`, and so the selector was `.psc-sliderSize`. You'd have to use `.psc-newStyle`, but REALLY you should change your class name. If you start having things called `newStyle` you'll get lost quick and waste incredible amounts of time. I suggest you take some time to figure out a naming scheme for everything, and STICK TO IT. I also suggest you use a restricted set of characters for your names, I usually stick to `[a-z][0-9]_` (and use snake\_case) or `[a-z][A-Z][0-9]` (and use camelCase). I also try to actually avoid using `[0-9]` though an occasional digit is fine. ---
**Author:** ![Aiasa21](https://avatars.discourse-cdn.com/v4/letter/a/aeb1de/32.png) [@Aiasa21](https://forum.inductiveautomation.com/u/Aiasa21)\ **Post date:** [June 14, 2022, 7:01pm UTC](https://forum.inductiveautomation.com/t/how-to-create-a-gauge-like-this/60715/13 "2022-06-14T19:01:18Z")
> [@pascal.fragnoud](#): > > I suggest you take some time to figure out a naming scheme for everything You are absolutely right, I started just to make some tests but now I have first of all to watch some tutorial about how to manage properly styles and then focus on them as you suggest. I'm working with Vision and I've never used them so I'm not very on the point, but with perspective everything is so different. About the slider, in your opinion is possible to modify its properties? It looks like is so poor about external changes ( size of line, dot ecc ). ---
**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\ **Post date:** [June 14, 2022, 8:09pm UTC](https://forum.inductiveautomation.com/t/how-to-create-a-gauge-like-this/60715/14 "2022-06-14T20:09:24Z")
I have no idea and no ignition access on this computer so I can’t check. If there are no built-in options to customize it, you can try putting a slider on a page and opening it in a browser to examine its html. If you can see its components, then you can select them and style them with css.