Custom widget: Slider with presets

This widget displays the standard slider widget and adds a collection of buttons below the slider. The buttons are generated from a CSV list.

I am using this widget for dimmers to provide full range control using the slider and quick access to commonly used levels with the presets. Before creating this, I was grouping standard slider and button widgets as shown in the right of the screenshot below. The left and bottom of the screenshot show a couple example configurations of the widget.

The CSV list can be just the values which will be used for the button text and the value written to the item as shown in the bottom of the screenshot. CSV: 0,25,50,75,100
The CSV list can also contain value/text mappings as shown in the left of the screenshot. CSV: 0=Off,50=Half,100=Full

The widget is available from GitHub:


How did you implement it to openhab when i select the widget it shows me preview widget with a blue background

This topic goes over how to use custom widgets:

The basic steps are:

  1. Open the custom widget management page
  2. Import the widget (if you have a version of HABpanel that supports GitHub import, then enter “jmsjones/habpanel-widgets” for the repository name)
  3. Click on the widget name
  4. Select the “Preview” tab
  5. Edit the preview settings using the gear icon in the top left corner
  6. If the preview is working as expected, then add the widget to real screens as needed

If you continue to have issues, please share your settings for the widget. Please provide the version of openHAB you are running as well.

I still have issues my openhab is on 2.2 right now

The image above shows the tab used to create the settings. We need to make sure the settings are being set to real world values using the “Preview” tab.

In the image below:

  • Top left is how you access the settings
  • Right shows example settings
  • Bottom left shows the result

Keep in mind that the “openHAB Item” should be set to an item of a type that is compatible with a slider. (Number or Dimmer)

I like this, have exactly the same issue combining buttons with sliders, so definitely will try this. Not sure I like the white color of the buttons so much but am sure that will be easy to adapt. Thanks @jjones for this template.

@jjones Love this widget. One question though, what would it take to add a background image to this widget?
Below an image of the regular slider in my Habpanel and your slider with presets. Would be great if I could add the lightbulb in your slider as well, even if just manual

I have updated the widget to support a background image. The GitHub repository (in the first post in this topic) has been updated with the new version.

@rswennen, please test this version and verify that it is working as you expect.

Would you mind sharing it like like that:
Slider is an openhabItem, three Buttons are an openhab item which differs from the above one?

Need it for a MAX! Heating Solution.
One Item ist setting the temperature with a slider and underneath it you can control the state AUTO,MANU,ECO.
Highlighting Auto,Manu or Eco presents the state of the item.

I think that many people need that. But the one you created is really nice.
Please think about it. You would help me a lot ;-( @jjones

@jjones tested it and works great !!! Thanks a lot.

@Marko_Kraft, sorry for the delayed reply. I saw that you participated in another topic related to thermostat buttons. Do you have what you need now?

Not really. I solved it with some rules. I have a heating which requires a slider to control the Temperature by hand. The three Buttons underneath are needed controlling the different states.
These ones have to be send:

AUTOMATIC (String command) - AUTO (Label of Button)
MANUAL (string command) - MANU (Label of Button)
There is no string provided for switching off. Therefore the third one has to be a value thats doesn‘t send a string but a value. E.g set.temperture 4.5 to an item which differs from the other 2.

I’m completly new to OpenHAB,Habpanel,AngularJS, web development. I would like to use your widget with vertical orentation. Is it possble?
Thanks, Marcell

@Marcell_Gerzsenyi, updating the widget to support a vertical orientation should be fairly straightforward. It will be about a week before I can take a look at it. If you can wait then I will take a pass at it for you.

I made it, but it occopied too much space on my dashboard, so I will not use it. Anyway, thank you for your widget :slight_smile:

@jjones Great wdiget! Is there any way to change the color of the buttons? At least make them black with white font or even transparent? Only thing stopping me from putting the widget into production is this. Thanks for your work.

edit: I see in the examples PNG that one of the widgets buttons are transparent (depending on HABpanel theme I assumed, Tested to not be true)


This widget looks very nice. But when I click on a button, the slider above does not change to the selected value. Am I missing a setting somehwere?

@Drongo, a few questions:

  1. Is the widget set to a real dimmer (the openHAB Item setting)?
  2. Does the light change when you click on one of the buttons on the widget?
  3. Does the light change when you use the slider on the widget?


  1. No, it’s a Color type. Wouldn’t know how to link a dimmer to a light (the Zigbee light only has a color channel) (Mood lights is Color)
  2. Yes, the brightness changes when using the buttons
  3. Yes, the slider works as well.

I have opened a new thread here, I think there might be something wrong with OpenHAB reading the current state of the lights. Which would also explain why this widget isn’t showing the proper values.
However I have no clue on how to fix it.

Hello your widget is very interesting. Since I am a newbie in widget and have no idea how to customize to my need would you be so kind to customize for me? I like the buttons idea, but I dont need the slider on top of that. I just need the buttons and the selected one with different color. tha’s it.
I hope you can help me out.


1 Like