Skip to content

Fix slider implementation #26

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
davidbrochart merged 3 commits into from
May 4, 2026
Merged

Fix slider implementation #26

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9bd316c
Fix slider implementation
martinRenou May 4, 2026
2db7736
Update examples/simple-yjs-widget/notebooks/simple.ipynb
martinRenou May 4, 2026
36e2c28
Handle review comment
martinRenou May 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
92 changes: 15 additions & 77 deletions examples/simple-yjs-widget/notebooks/simple.ipynb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,64 +7,23 @@
"metadata": {},
"outputs": [],
"source": [
"from ypywidgets import Reactive\n",
"from ypywidgets.comm import CommWidget\n",
"from pycrdt import Map"
]
},
{
"cell_type": "code",
"execution_count": null,
"id": "6d9538c9-4858-4c9d-b347-18965660115d",
"metadata": {},
"outputs": [],
"source": [
"class MySlider(CommWidget):\n",
" def __init__(self, value=50, min=0, max=100, step=1):\n",
" super().__init__(\n",
" comm_metadata={\n",
" \"ymodel_name\": \"MySlider\",\n",
" \"create_ydoc\": True,\n",
" }\n",
" )\n",
"\n",
" self.ydoc[\"state\"] = self._state = Map()\n",
"\n",
" self.min = min\n",
" self.max = max\n",
" self.step = step\n",
" self.value = value\n",
"\n",
" @property\n",
" def value(self):\n",
" return self._state['value']\n",
"\n",
" @value.setter\n",
" def value(self, v):\n",
" self._state['value'] = v\n",
"\n",
" @property\n",
" def min(self):\n",
" return self._state['min']\n",
"\n",
" @min.setter\n",
" def min(self, v):\n",
" self._state['min'] = v\n",
"\n",
" @property\n",
" def max(self):\n",
" return self._state['max']\n",
"\n",
" @max.setter\n",
" def max(self, v):\n",
" self._state['max'] = v\n",
"\n",
" @property\n",
" def step(self):\n",
" return self._state['step']\n",
"class MySlider(CommWidget):\n",
" value = Reactive[int](50)\n",
Comment thread
martinRenou marked this conversation as resolved.
" min = Reactive[int](0)\n",
" max = Reactive[int](100)\n",
" step = Reactive[int](1)\n",
"\n",
" @step.setter\n",
" def step(self, v):\n",
" self._state['step'] = v"
" @value.watch\n",
" def _watch_value(self, old, new):\n",
" # Watch the value of the slider, and print the new value change\n",
" #\n",
" # From JupyterLab, show the log console with info level to see the print\n",
" # \"Ctrl + Shift + C\" then type \"Log Console\" to expand that panel\n",
" print(f\"value changed: '{old}'->'{new}'\")"
]
},
{
Expand Down Expand Up @@ -121,32 +80,11 @@
{
"cell_type": "code",
"execution_count": null,
"id": "55896ccc-a128-4abf-a34d-4a50272946dd",
"metadata": {},
"outputs": [],
"source": [
"w2 = MySlider(max=200, step=2, value=152)\n",
"w2"
]
},
{
"cell_type": "code",
"execution_count": null,
"id": "c54528b0-6eae-4601-b6f6-ab2f31630815",
"metadata": {},
"outputs": [],
"source": [
"w2.value"
]
},
{
"cell_type": "code",
"execution_count": null,
"id": "23380f74-83ea-4409-a990-a0b8958dde2b",
"id": "dc6f7a60-2426-4c04-8e4e-ceb0ab728c3a",
"metadata": {},
"outputs": [],
"source": [
"w2.value"
"w.max = 200"
]
}
],
Expand Down
29 changes: 13 additions & 16 deletions examples/simple-yjs-widget/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,49 +1,46 @@
import {
IJupyterYModel,
JupyterYModel,
IJupyterYWidgetManager
IJupyterYWidgetManager,
IJupyterYDoc
} from 'yjs-widgets';

import * as Y from 'yjs';

import {
JupyterFrontEnd,
JupyterFrontEndPlugin
} from '@jupyterlab/application';
import { MapChange } from '@jupyter/ydoc';

class MySlider {
constructor(yModel: IJupyterYModel, node: HTMLElement) {
this.yModel = yModel;
this.node = node;

this.state = this.yModel.sharedModel.ydoc.getMap('state');

this.state.observe(this._stateChanged.bind(this));

this.slider = document.createElement('input');
this.slider.setAttribute('type', 'range');

this.slider.min = this.state.get('min');
this.slider.max = this.state.get('max');
this.slider.value = this.state.get('value');
this.slider.step = this.state.get('step');
this.yModel.sharedModel.attrsChanged.connect(this._stateChanged.bind(this));

this.slider.min = this.yModel.sharedModel.getAttr('min');
this.slider.max = this.yModel.sharedModel.getAttr('max');
this.slider.value = this.yModel.sharedModel.getAttr('value');
this.slider.step = this.yModel.sharedModel.getAttr('step');

this.slider.onchange = this._sliderChanged.bind(this);

node.appendChild(this.slider);
}

_stateChanged(change: Y.YMapEvent<any>): void {
for (const key of change.keysChanged) {
this.slider[key] = change.target.toJSON()[key];
_stateChanged(_: IJupyterYDoc, change: MapChange): void {
for (const key of change.keys()) {
this.slider[key] = this.yModel.sharedModel.getAttr(key);
}
}

_sliderChanged(): void {
this.state.set('value', parseInt(this.slider.value ?? '50'));
this.yModel.sharedModel.setAttr('value', parseInt(this.slider.value ?? '50'));
}

state: Y.Map<any>;
yModel: IJupyterYModel;
node: HTMLElement;
slider: HTMLInputElement;
Expand Down
Loading