<!--
Please DO NOT ERASE this template, but fill in the details as requested. Th…is will ensure your issue is properly filed and will be considered. Otherwise, we may reserve the right to close it without further action.
-->
**Proposed fix and background on why this happened is included at the end.** Long story short, oh-slider has a long-standing bug in its handing of stateDescription.step. A recent change in mqtt.generic seemed to make this more common due to newly _very_ precise stateDescription.step values being passed to the slider from mqtt Dimmer channels -> Items -> UI.
Workaround at end.
## The problem
<!--
Describe the issue you're having. In most cases it is appreciated to share screenshots or
even animated GIFs of your issue.
To make screenshots:
* On Windows: use Win+Shift+S
* On macOS: use Cmd+Shift+4
To make animated GIFs we recommend:
* On Windows: ShareX - https://getsharex.com/
* On macOS: Giphy Capture - https://giphy.com/apps/giphycapture
* On GNU/Linux: Peek - https://github.com/phw/peek
-->
Background: I have been debugging an issue with rendering of ColorTemperature and Brightness items (that are linked to MQTT.generic things after openhab/openhab-addons#17813 (i.e. 4.3.x). See below for details on the relationship with that PR). When I attempt to adjust one of these items in MainUI I see a Dimmer that looks like this no matter the state of the item is (in this case mt item is at 19%):

The item details from the API Explorer:
```json
{
"link": "https://<<redacted>>/rest/items/BedsideTableLamp_Brightness",
"state": "19.00",
"stateDescription": {
"minimum": 0,
"maximum": 100,
"step": 0.3937007874015748,
"pattern": "%.0f %%",
"readOnly": false,
"options": []
},
"metadata": {
"ga": {
"value": "lightBrightness"
},
"semantics": {
"value": "Point_Control",
"config": {
"relatesTo": "Property_Level",
"isPointOf": "BedsideTableLamp"
}
}
},
"editable": true,
"type": "Dimmer",
"name": "BedsideTableLamp_Brightness",
"label": "Brightness",
"category": "slider",
"tags": [
"Control",
"Level"
],
"groupNames": [
"BedsideTableLamp"
]
}
```
(See Additional Details below for details on why that step showing here are below where I've identified the root cause.)
Clicking/interacting with the slider at any location causes a single update of the item to the existing value (in this case 19) with no visual update to the slider. Any additional clicks do nothing.
## Expected behavior
<!--
Describe what you expected to happen or how it should look/behave.
-->
I expect the slider to look like this and be completely interactive.

or, if that isn't possible, I expect the slider to not load at all, and ideally be replaced with an error message. Ideally something somewhat detailed like "Error rendering Slider with config {dumped config}". (in this case something as simple as "Error when loading slider label" would have helped me significantly when debugging this.)
## Steps to reproduce
<!--
Provide accurate steps to reproduce the issue, including pastes of widget/page code if necessary.
-->
1. Create an item
2. Note that the Slider renders as expected.
3. Apply State Description min=0, max=100, step=1.234 (note, `234` may be replaced with any string of numbers above 100).
4. Clear cache and refresh page
5. Note that the slider does not have a number line and is no longer interactive (it will not slide).
Minimal broken item:
```json
{
"link": "https://<<redacted>>/rest/items/Test_Broken_Dimmer",
"state": "NULL",
"stateDescription": {
"minimum": 0,
"maximum": 100,
"step": 1.234,
"readOnly": false,
"options": []
},
"metadata": {
"stateDescription": {
"value": " ",
"config": {
"step": "1.234",
"min": "0",
"max": "100"
}
}
},
"editable": true,
"type": "Dimmer",
"name": "Test_Broken_Dimmer",
"label": "Broken Dimmer with Step",
"category": "",
"tags": [],
"groupNames": []
}
```
## Your environment
<!--
As an admin, in the main UI, choose *Help & About* on the left sidebar, expand *Technical information* and click on *View details*, then click *Copy* and paste the results here. You may omit information that is not pertinent to this issue if you feel it's divulging information you'd like not to share.
-->
```yaml
runtimeInfo:
version: 4.3.2
buildString: Release Build
locale: en-US
systemInfo:
configFolder: /openhab/conf
userdataFolder: /openhab/userdata
logFolder: /openhab/userdata/logs
javaVersion: 17.0.13
javaVendor: Debian
osName: Linux
osVersion: 6.1.0-27-amd64
osArchitecture: amd64
availableProcessors: 4
freeMemory: 295457088
totalMemory: 538968064
uptime: 98828
startLevel: 100
addons:
- automation-jsscripting
- binding-airquality
- binding-androiddebugbridge
- binding-astro
- binding-chromecast
- binding-hue
- binding-icalendar
- binding-ipcamera
- binding-jellyfin
- binding-mqtt
- binding-nanoleaf
- binding-openweathermap
- binding-pushover
- binding-roku
- binding-tplinksmarthome
- binding-unifi
- binding-vizio
- binding-zwave
- misc-metrics
- misc-openhabcloud
- persistence-influxdb
- persistence-rrd4j
- transformation-jsonpath
- transformation-map
- ui-basic
- ui-habpanel
clientInfo:
device:
ios: false
android: false
androidChrome: false
desktop: true
iphone: false
ipod: false
ipad: false
edge: false
ie: false
firefox: true
macos: false
windows: true
cordova: false
phonegap: false
electron: false
nwjs: false
webView: false
webview: false
standalone: false
os: windows
pixelRatio: 1.6666666666666667
prefersColorScheme: dark
isSecureContext: true
locationbarVisible: true
menubarVisible: true
navigator:
cookieEnabled: true
deviceMemory: N/A
hardwareConcurrency: 4
language: en-US
languages:
- en-US
- en
onLine: true
platform: Win32
screen:
width: 1800
height: 1200
colorDepth: 24
support:
touch: false
pointerEvents: true
observer: true
passiveListener: true
gestures: false
intersectionObserver: true
themeOptions:
dark: dark
filled: true
pageTransitionAnimation: default
bars: light
homeNavbar: default
homeBackground: default
expandableCardAnimation: default
blocklyRenderer: null
userAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:133.0) Gecko/20100101
Firefox/133.0
timestamp: 2025-01-14T10:38:52.994Z
```
## Browser console
<!--
Open the developer tools in your browser, go to the Console tab and paste errors and other messages that might be relevant to this issue.
You may also paste a screenshot if you prefer.
-->
Specifically these are the errors from my minimal repro.
```txt
RangeError: precision 234 out of range
toStepFixed https://<<redacted>>/js/app.4b7e0bc536a621ffbe03.js:2
formatScaleLabel https://<<redacted>>/js/app.4b7e0bc536a621ffbe03.js:2
value https://<<redacted>>/js/app.4b7e0bc536a621ffbe03.js:2
Tn https://<<redacted>>/js/app.4b7e0bc536a621ffbe03.js:2
value https://<<redacted>>/js/app.4b7e0bc536a621ffbe03.js:2
t https://<<redacted>>/js/app.4b7e0bc536a621ffbe03.js:2
r https://<<redacted>>/js/app.4b7e0bc536a621ffbe03.js:2
<<<callstack trimmed for conciseness, I hope you don't mind>>>
app.4b7e0bc536a621ffbe03.js:2:1437118
Uncaught TypeError: e.$refs.rangeslider.f7Range is undefined
mounted https://<<redacted>>/js/app.4b7e0bc536a621ffbe03.js:2
setTimeout handler*mounted https://<<redacted>>/js/app.4b7e0bc536a621ffbe03.js:2
Kn https://<<redacted>>/js/app.4b7e0bc536a621ffbe03.js:2
kn https://<<redacted>>/js/app.4b7e0bc536a621ffbe03.js:2
insert https://<<redacted>>/js/app.4b7e0bc536a621ffbe03.js:2
S https://<<redacted>>/js/app.4b7e0bc536a621ffbe03.js:2
Bi https://<<redacted>>/js/app.4b7e0bc536a621ffbe03.js:2
_update https://<<redacted>>/js/app.4b7e0bc536a621ffbe03.js:2
a https://<<redacted>>/js/app.4b7e0bc536a621ffbe03.js:2
get https://<<redacted>>/js/app.4b7e0bc536a621ffbe03.js:2
<<<trimmed again>>>
app.4b7e0bc536a621ffbe03.js:2:1396663
```
## Browser network traffic
<!--
Open the developer tools in your browser, go to the Network tab and paste
screenshots of the network traffic and the details of individual requests that failed.
-->
All traffic is successful (2XX), and relevant Item details are listed above. If anything else from the Network tab can help I'd be happy to provide.
## Additional information
<!--
Provide any information not pertinent to the above sections that you'd still like to share.
-->
Taking a look at toStepFixed, the RangeError seems to be coming from toFixed. This code is trying to use the number of decimals in the step to round the incoming number, but instead it is passing the decimal portion of the step value directly. (i.e. a step of 1.245 is setting nbDecimals to 245, not 3). The fix should be adding `.length` after `[1]`. I'm happy to open a PR myself if a contributor on this repo is able to verify it for me (this would be my first contribution and I'd need to ramp up to the dev environment first).
In oh-slider.vue, the step is used to round the
```vue
toStepFixed (value) {
// uses the number of decimals in the step config to round the provided number
const nbDecimals = this.config.step ? Number(this.config.step).toString().replace(',', '.').split('.')[1] : 0
return parseFloat(Number(value).toFixed(nbDecimals))
},
```
https://github.com/openhab/openhab-webui/blame/7ef5b6fe1c29aeca733d4012b5720538a07a245f/bundles/org.openhab.ui/web/src/components/widgets/system/oh-slider.vue#L58
### Root cause
The change to oh-slider above was made 4 years ago. I can't speak for other addons, but in the case of mqtt I believe it didn't raise issues because step values were not automatically this precise before a recent change in 4.3.x. In this case this happened because my Item is linked to this channel from mqtt.generic:
```txt
Type dimmer : brightness "brightness" [ stateTopic = "zigbee2mqtt/HueWhiteAndColor0AE7/brightness", commandTopic = "zigbee2mqtt/HueWhiteAndColor0AE7/set/brightness", min = 0, max = 254, step = 1 ]
```
Prior to openhab/openhab-addons#17813, this step would have been 1 (matching the channel) or default to 1 if no step was provided. After this change the step is calculated based on the range and channel step (see [here](https://github.com/openhab/openhab-addons/blob/184ef673a2aad92d2c83bb4af4e2088c67a4187b/bundles/org.openhab.binding.mqtt.generic/src/main/java/org/openhab/binding/mqtt/generic/values/PercentageValue.java#L72), which is set on the Item at the bottom of that file. In my case 0.3937007874015748 is (1 * 100 / 254).
I suspect that most of the time other bindings also don't set such oddly precise step values and haven't run into this, and I also suspect that humans don't write stateDescriptions with such odd step values either.
### Workarounds for others
If you come across this before the change is available, the workaround that's worked for me is manually creating a StateDescription with a more reasonable Step value (i.e. one that has a decimal part that is less than 100, like 1.99, 25.45, etc.). Its a bit painful to make one for each item, but it seems to address the issue after a forced reload of the UI.