Slider steps?

How-to Discussions
1

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.

2

Hi!

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

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

Or try RelativeUserStep

4

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

5

Hmm, It seems steps definitely don’t work

6

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

7

UserStep doesn’t do anything for me either. I found this thread from last year: https://www.fusetools.com/community/forums/howto_discussions/slider_with_integer_values

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

<App>
	<JavaScript>
	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 = {
		slider,
		sliderText,
		useIntSteps
	};
	</JavaScript>

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

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