Slider steps?

Hello again!

I’ve recently placed a slider somewhere in my app and I noticed that it has a thousand decimals by default when setting a value which is kind of annoying, especially if you’re displaying the value to the user like this:

When I click the Ok button I have a little JS tweak to floor the value as it’s to be display on a button after the value is set as well.
But I would like to know if it’s possible to set a certain increment or steps to 1. Had a quick look at the Slider Class in Docs but didn’t manage to find any solutions.


In scenarios like this its recommended to format the value in JavaScript. You can use .toFixed() on the Number, please check out the docs

<Slider Value="1" Minimum="0" Maximum="100" UserStep="1"/>

Or try RelativeUserStep

I’ve tried both but they don’t work :confused:

Hmm, It seems steps definitely don’t work

How did the JS solution not work? Are you able to share the code in question?

UserStep doesn’t do anything for me either. I found this thread from last year:

Here’s a basic JS example to use for the time being:

	const Observable = require("FuseJS/Observable");
	const slider = Observable();	
	const sliderText = Observable("0");
	const stepSize = 10;
	function useIntSteps() {
		slider.value = slider.value - (slider.value % stepSize);
		sliderText.value = slider.value;

	module.exports = {

	<Grid RowCount="2">
		<Panel Color="#909">
			<Text Value="{sliderText}" Alignment="Center" FontSize="50" Color="#fff" />

		<Panel Color="#303808">
			<Slider Minimum="0" Maximum="100" Value="{slider}" ValueChanged="{useIntSteps}" />