diff --git a/src/fontra/client/web-components/designspace-location.js b/src/fontra/client/web-components/designspace-location.js
index 466bf74b9..eb48964a9 100644
--- a/src/fontra/client/web-components/designspace-location.js
+++ b/src/fontra/client/web-components/designspace-location.js
@@ -65,7 +65,7 @@ export class DesignspaceLocation extends UnlitElement {
         // Event was triggered by us -- ignore
         return;
       }
-      const slider = this.shadowRoot.querySelector(`range-slider[name="${event.key}"]`);
+      const slider = this.shadowRoot.querySelector(`#slider-${event.key}`);
       if (slider) {
         slider.value = event.newValue;
       }
@@ -85,7 +85,7 @@ export class DesignspaceLocation extends UnlitElement {
     this._values = { ...values };
 
     for (const [axisName, value] of Object.entries(values)) {
-      const slider = this.shadowRoot.querySelector(`range-slider[name="${axisName}"]`);
+      const slider = this.shadowRoot.querySelector(`#slider-${axisName}`);
       if (slider) {
         slider.value = value;
       }
@@ -93,9 +93,7 @@ export class DesignspaceLocation extends UnlitElement {
 
     for (const axis of this.axes || []) {
       if (!(axis.name in values)) {
-        const slider = this.shadowRoot.querySelector(
-          `range-slider[name="${axis.name}"]`
-        );
+        const slider = this.shadowRoot.querySelector(`#slider-${axis.name}`);
         if (slider) {
           slider.value = axis.defaultValue;
         }
@@ -133,12 +131,13 @@ export class DesignspaceLocation extends UnlitElement {
       );
       elements.push(
         html.createDomElement("range-slider", {
-          name: axis.name,
+          id: `slider-${axis.name}`,
           minValue: axis.minValue,
           maxValue: axis.maxValue,
           defaultValue: axis.defaultValue,
           value: modelValue !== undefined ? modelValue : axis.defaultValue,
-          onChangeCallback: (event) => this._dispatchLocationChangedEvent(event),
+          onChangeCallback: (event) =>
+            this._dispatchLocationChangedEvent(axis.name, event.value),
         })
       );
       elements.push(infoBox);
@@ -157,11 +156,11 @@ export class DesignspaceLocation extends UnlitElement {
     }
   }
 
-  _dispatchLocationChangedEvent(slider) {
+  _dispatchLocationChangedEvent(name, value) {
     if (this.controller) {
-      this.controller.setItem(slider.name, slider.value, this);
+      this.controller.setItem(name, value, this);
     } else {
-      this.values[slider.name] = slider.value;
+      this.values[name] = value;
       const event = new CustomEvent("locationChanged", {
         bubbles: false,
         detail: this,
diff --git a/src/fontra/client/web-components/range-slider.js b/src/fontra/client/web-components/range-slider.js
index 4f7123ff9..4caa7ebe1 100644
--- a/src/fontra/client/web-components/range-slider.js
+++ b/src/fontra/client/web-components/range-slider.js
@@ -26,17 +26,6 @@ export class RangeSlider extends LitElement {
       font-feature-settings: "tnum" 1;
     }
 
-    .slider-name {
-      min-width: 7ch;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      text-align: right;
-    }
-
-    .slider-name:hover {
-      cursor: pointer;
-    }
-
     .range-container {
       position: relative;
       flex-grow: 1;
@@ -157,7 +146,6 @@ export class RangeSlider extends LitElement {
   `;
 
   static properties = {
-    name: { type: String, reflect: true },
     minValue: { type: Number },
     maxValue: { type: Number },
     defaultValue: { type: Number },
@@ -170,13 +158,13 @@ export class RangeSlider extends LitElement {
   constructor() {
     super();
     // Fallbacks for attributes that are not defined when calling the component
-    this.name = "Slider";
     this.minValue = 0;
     this.maxValue = 100;
     this.defaultValue = this.minValue;
     this.value = this.defaultValue;
     this.tickmarksPositions = [];
     this.step = "any";
+    this.sawMouseDown = false;
     this.onChangeCallback = () => {};
   }
 
@@ -247,10 +235,11 @@ export class RangeSlider extends LitElement {
     event.preventDefault();
     this.value = clamp(newValue, this.minValue, this.maxValue);
     this.updateIsAtDefault();
-    this.onChangeCallback(this);
+    this.onChangeCallback({ value: this.value });
   }
 
   handleMouseDown(event) {
+    this.sawMouseDown = true;
     const activeElement = document.activeElement;
     this._savedCanvasElement =
       activeElement?.id === "edit-canvas" ? activeElement : undefined;
@@ -262,6 +251,8 @@ export class RangeSlider extends LitElement {
 
   handleMouseUp(event) {
     this._savedCanvasElement?.focus();
+    this.sawMouseDown = false;
+    this.onChangeCallback({ value: this.value, dragEnd: true });
   }
 
   changeValue(event) {
@@ -282,7 +273,13 @@ export class RangeSlider extends LitElement {
       }
     }
     this.updateIsAtDefault();
-    this.onChangeCallback(this);
+
+    const callbackEvent = { value: this.value };
+    if (this.sawMouseDown) {
+      callbackEvent.dragBegin = true;
+    }
+    this.sawMouseDown = false;
+    this.onChangeCallback(callbackEvent);
   }
 
   updateIsAtDefault() {
@@ -304,7 +301,7 @@ export class RangeSlider extends LitElement {
 
   reset(event) {
     this.value = this.defaultValue;
-    this.onChangeCallback(this);
+    this.onChangeCallback({ value: this.value });
   }
 
   buildTickmarks() {