Note that you can also override the width like this: theme: ` ${sliderThemes["Chrome macOS"]} :scope { width: calc(100% - 120px) } ` This was the intended way to extend themes (":scope" will automatically be replaced with a unique class name). And by removing the reference to `width` you ensure that your slider does not reset on every width change, allowing you to get rid of `this.value` as well.