Javascript 滑块更改后更新地址栏值

我有一个价格滑块，可以用来过滤产品结果。这是找到的离子范围滑块

当用户完成拖动滑块后，将向数据库发送一个XMLHttp请求，产品将刷新，而无需重新加载页面

在这一点上，我想更新URL以匹配页面的内容。例如，如果用户访问以下页面：

mywebsite.com/a-product-category/

并将价格滑块设置为$10-$40，我希望URL更改为：

mywebsite.com/a-product-category/10-to-40

在jQuery或Javascript中有没有一种简单的方法可以做到这一点？我尝试了各种实现PushState的方法，但对我来说不起作用。也许我做错了：

if (!this.dragging) {
    window.history.pushState({}, '', '/10-to-40');
}

非常感谢您的帮助。谢谢

编辑：

我已经创建了两个版本，一个是window.history.pushState{}，/10-to-40'；一行一行没有

没有国家： 链接不再工作

对于pushState： 链接不再工作

如您所见，滑块在第一个示例中起作用，但在第二个示例中不起作用。下面是我在第二页看到的错误：

SecurityError:操作不安全

这是指第982行，即pushState

它不安全有什么原因吗？谢谢

编辑2：

这是因为在子域上工作。将pushState更改为完整URL修复了该问题

if (!this.dragging) {
    window.history.pushState({}, '', 'http://dev.mywebsite.com/a-product-category/10-to-40');
}

---

感谢

通过一个简短的测试，该代码似乎可以工作。不管是什么问题，到目前为止，您共享的代码似乎都没有证明这一点。您尝试过使用hashchange吗？mywebsite.com/a-product-category/10-to-40您可以通过event@DeepakDavid检测hashchange-pushState是现代的替代品，问题是如何设置URL，没有检测到对它的更改。对，但传统且简单的方法是hashchange，它确实有一个跟踪URL更改的事件PushState是非黑客且简单的，问题中的代码可以工作。