# Obtain GUI Component Within onValueChangedObservable on Slider and ColorPicker **URL:** \ **Category:** Completed Features\ **Tags:** gui\ **Created:** [October 18, 2025, 7:19pm UTC](https://forum.babylonjs.com/t/obtain-gui-component-within-onvaluechangedobservable-on-slider-and-colorpicker/61045 "2025-10-18T19:19:45Z")\ **Posts on this page:** 10\ **Page:** 1
**Author:** ![HiGreg](https://avatars.discourse-cdn.com/v4/letter/h/c5a1d2/32.png) [@HiGreg](https://forum.babylonjs.com/u/HiGreg)\ **Post date:** [October 18, 2025, 7:19pm UTC](https://forum.babylonjs.com/t/obtain-gui-component-within-onvaluechangedobservable-on-slider-and-colorpicker/61045/1 "2025-10-18T19:19:45Z")
I’m using the same observer for multiple sliders, and I want to obtain the specific slider control being changed from the onValueChangedObservable. This time, I’m using a slider [(whereas here is the same issue I posted a year ago about ColorPicker)](https://forum.babylonjs.com/t/obtain-gui-component-within-onvaluechangedobservable/50190/5). I think the change required is in one place for slider, and one place for color picker: line 160 [in baseSlider](https://github.com/BabylonJS/Babylon.js/blob/master/packages/dev/gui/src/2D/controls/sliders/baseSlider.ts): ``` this.onValueChangedObservable.notifyObservers(this._value); ``` And line 90 in [colorpicker.ts](https://github.com/BabylonJS/Babylon.js/blob/master/packages/dev/gui/src/2D/controls/colorpicker.ts): ``` this.onValueChangedObservable.notifyObservers(this._value); ``` Recommend to change those lines to: ``` this.onValueChangedObservable.notifyObservers(this._value, -1, this, this); ``` # Background from [Babylon.js docs](https://doc.babylonjs.com/typedoc/classes/BABYLON.Observable#notifyobservers) > notifyObservers( > eventData: T, > mask?: number, > target?: any, > currentTarget?: any, > userInfo?: any, > ): boolean Both target and currentTarget are defined as Control. Looking at pointer observables, target comes from a parameter to the calling function, but currentTarget is “this”: the control from which the observable is called. In the Button Control, target and currentTarget are identical in my simple usage/experiments. For JavaScript Events in general, here is the difference between target and currentTarget ([from sqlpey.com](https://sqlpey.com/javascript/solved-understanding-the-key-differences-between-currenttarget-and-target-properties-in-javascript/)): - target: The target property refers to the element that dispatched the event. For instance, if a user clicks on a child \ element within a \, the target will be the button itself. This property is helpful for determining exactly which element triggered the event. - currentTarget: Conversely, the currentTarget property represents the element to which the event listener is currently attached. Continuing with the previous example, if the \ has an event listener for the click event, the currentTarget will be the \ no matter which button is clicked. From this description and because the “event listener” (aka observable) is on the slider itself, both target and currentTarget should probably be the same in the case of these slider and colorpicker modifications. ---
**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\ **Post date:** [October 20, 2025, 3:55pm UTC](https://forum.babylonjs.com/t/obtain-gui-component-within-onvaluechangedobservable-on-slider-and-colorpicker/61045/2 "2025-10-20T15:55:28Z")
cc @georgie ---
**Author:** ![georgie](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/georgie/32/46049_2.png) [@georgie](https://forum.babylonjs.com/u/georgie)\ **Post date:** [October 21, 2025, 2:13am UTC](https://forum.babylonjs.com/t/obtain-gui-component-within-onvaluechangedobservable-on-slider-and-colorpicker/61045/3 "2025-10-21T02:13:12Z")
@HiGreg hi greg! that seems like a reasonable change, do you want to create a PR with the proposed change? would be great to also see a playground using said change for testing purposes (one that is broken otherwise) Small note, I recommend sending undefined for the mask parameter cc @amoebachant who reviewed the [original post shared above](https://forum.babylonjs.com/t/obtain-gui-component-within-onvaluechangedobservable/50190/5) ---
**Author:** ![HiGreg](https://avatars.discourse-cdn.com/v4/letter/h/c5a1d2/32.png) [@HiGreg](https://forum.babylonjs.com/u/HiGreg)\ **Post date:** [October 21, 2025, 2:35am UTC](https://forum.babylonjs.com/t/obtain-gui-component-within-onvaluechangedobservable-on-slider-and-colorpicker/61045/4 "2025-10-21T02:35:54Z")
I don’t have a way to test the pull request. But I created both pull requests separately. First ever to babylon, not sure I did it right. Playground incoming. ---
**Author:** ![georgie](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/georgie/32/46049_2.png) [@georgie](https://forum.babylonjs.com/u/georgie)\ **Post date:** [October 21, 2025, 2:53am UTC](https://forum.babylonjs.com/t/obtain-gui-component-within-onvaluechangedobservable-on-slider-and-colorpicker/61045/5 "2025-10-21T02:53:57Z")
Exciting to create first PRs! Once you have a playground snippet, you can test it using the generated links within the PR comments. Looks like the build is failing due to formatting, likely the newline added at the end of the file ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/5/0/506e17ae4411a7cef2adb7ce22954f4923146e6b.png) ---
**Author:** ![HiGreg](https://avatars.discourse-cdn.com/v4/letter/h/c5a1d2/32.png) [@HiGreg](https://forum.babylonjs.com/u/HiGreg)\ **Post date:** [October 21, 2025, 3:07am UTC](https://forum.babylonjs.com/t/obtain-gui-component-within-onvaluechangedobservable-on-slider-and-colorpicker/61045/6 "2025-10-21T03:07:53Z")
Playground testing target in slider event. > **[Babylon.js Playground](https://playground.babylonjs.com/#UBZNMP)** > > Babylon.js playground is a live editor for Babylon.js WebGL and WebGPU 3D scenes I edited on github, which added the newline. I can try to fix. ---
**Author:** ![HiGreg](https://avatars.discourse-cdn.com/v4/letter/h/c5a1d2/32.png) [@HiGreg](https://forum.babylonjs.com/u/HiGreg)\ **Post date:** [October 21, 2025, 10:23am UTC](https://forum.babylonjs.com/t/obtain-gui-component-within-onvaluechangedobservable-on-slider-and-colorpicker/61045/7 "2025-10-21T10:23:35Z")
baseSlider.ts PR works well. Lower right (last word) in popup shows slider name instead of “undefined”. > **[Babylon.js Playground](https://playground.babylonjs.com/?snapshot=refs%2Fpull%2F17323%2Fmerge#UBZNMP%230)** > > Babylon.js playground is a live editor for Babylon.js WebGL and WebGPU 3D scenes ---
**Author:** ![HiGreg](https://avatars.discourse-cdn.com/v4/letter/h/c5a1d2/32.png) [@HiGreg](https://forum.babylonjs.com/u/HiGreg)\ **Post date:** [October 21, 2025, 10:43am UTC](https://forum.babylonjs.com/t/obtain-gui-component-within-onvaluechangedobservable-on-slider-and-colorpicker/61045/8 "2025-10-21T10:43:15Z")
colorPicker.ts testing onValueChanged state.target. [Test newest nightly](https://playground.babylonjs.com/#ZMLBW6#8) [Test Pull Request](https://playground.babylonjs.com/?snapshot=refs/pull/17322/merge#ZMLBW6#8) Failed test results in no color changes to sphere. Passing test results in color changes. ~~Will update this post when commit is passing test.~~ Test above is passing. Pull Request un-draft-ed. Things I don’t know how to do: squash commits into one, tag commit with label (“feature request”), rename PR ---
**Author:** ![georgie](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/georgie/32/46049_2.png) [@georgie](https://forum.babylonjs.com/u/georgie)\ **Post date:** [October 21, 2025, 2:57pm UTC](https://forum.babylonjs.com/t/obtain-gui-component-within-onvaluechangedobservable-on-slider-and-colorpicker/61045/9 "2025-10-21T14:57:54Z")
The commits get squashed into 1 when you merge so you don’t have to worry about doing it manually. To add a tag you select ‘label’ shown in the below screenshot. To edit PR title you click the ‘edit’ button. Also, here are our docs for contributing to babylon. It is easiest to clone the repo / use vscode to make the change. Formatting will be taken into account if you install the recommended vscode extension prettier. You can also test locally before pushing a PR by using the instructions in the docs [Start Contributing to Babylon.js | Babylon.js Documentation](https://doc.babylonjs.com/contribute/toBabylon/HowToContribute/) ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/5/f/5f98139adb0d046d3ea81d6032bd26488cd4ba67.png) ---
**Author:** ![georgie](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/georgie/32/46049_2.png) [@georgie](https://forum.babylonjs.com/u/georgie)\ **Post date:** [October 21, 2025, 4:22pm UTC](https://forum.babylonjs.com/t/obtain-gui-component-within-onvaluechangedobservable-on-slider-and-colorpicker/61045/10 "2025-10-21T16:22:25Z")
I’ve updated the PR descriptions, added the labels, updated title, and approved PRs. Thank you!