Setting slider value programatically

[BartaG512]

I would like to set the slider value programatically. Can i do this rightnow?

[RVenkatesh]

@BartaG512 Can you elaborate a bit more on this? It would be great if you can provide some code examples too.

[BartaG512]

My use case that I have to update the slider's value from websocket updates.
I tried to pass a value variable into the component like this:

{{ember-slider value=sliderValue config=options}}

Then i updated sliderValue on the controller.
The slider value indeed changed. But slider handle did not follow it.

To achieve updating i had to extend the slider component, and use moveToPercentage method (in my example the min, max range is 0-100 so it is not a problem to use moveToPercentage method)

import EmberSlider from '@love-open-source/ember-slider/components/ember-slider'; //
import { observer } from '@ember/object';

export default EmberSlider.extend({
	init() {
		this._super(...arguments);
	},

	// eslint-disable-next-line
	setValueObs: observer('sliderValue', function() {
		this.moveToPercentage(this.get('sliderValue'));
	}),
});

Template:

{{extended-slider sliderValue=sliderValue config=this.options onChange=(action "onChangeAction") }}

This works but i guess observer is not the optimal solution for this.

I think the slider component should be changed that way, if you set the value, it should move the slider handle also.

[RVenkatesh]

@BartaG512 Agreed. The component with its current implementation assumes that the value will be once passed and further changed only by the component itself and not from the outside. I believe you are updating the value of your component from outside ( a new value from your web socket connection ).

We will add this capability sooner. While we do that, your extended slider is a good workaround.

[BryanCrotaz]

This is really easy with Octane. Use https://github.com/pzuraq/tracked-toolbox and the @localcopy decorator. It will accept local changes and then overwrite them if the external args change

[RVenkatesh]

This is really easy with Octane. Use https://github.com/pzuraq/tracked-toolbox and the @localcopy decorator. It will accept local changes and then overwrite them if the external args change

Thanks @BryanCrotaz for suggesting. 👍