[Bug]: ColorSlider position not updating on change of hue value

[prabhjodh]

Code of conduct

• [X] I agree to follow this project's code of conduct.

Impacted component(s)

sp-color-slider

Expected behavior

The slider position should change according to the updated hue value.

Actual behavior

The slider/color handle position is not changing/updating according to the updated hue value when only 'value' property is passed and 'color' property is not passed.

Screenshots

https://user-images.githubusercontent.com/20225072/228529805-4d8c7208-8b63-475b-a616-9cf09a75ed6d.mov

What browsers are you seeing the problem in?

Firefox, Chrome, Safari, Microsoft Edge

How can we reproduce this issue?

1. Add the sp-color-slider
2. Pass 'value' property with the hue value, stored in some state
3. Do not pass the 'color' property
4. Change the hue property value without using the slider (can change hue state value by using an input field)
5. After changing the value, the color of the color handle is updated but the slider position remains the same as last color.

Sample code that illustrates the problem

@state() private _hue = 0;

protected render(){ return html<sp-color-slider value=${this._hue} @input=${this._onChangeSlider} ></sp-color-slider> <input value=${this._hue} @onChange=${this.updateHueState} ></input>; }

Logs taken while reproducing problem

No response