html - 支持 Microsoft Edge 的多范围 slider-6ren

html - 支持 Microsoft Edge 的多范围 slider

转载作者：行者123 更新时间：2023-11-27 22:56:39

我正在创建一个多范围 slider ，使用 2 个 slider 并使它们相互重叠。

我已成功创建它并在 Chrome 和 Mozilla 中支持它，但我似乎无法支持 Edge。

样式在 SCSS 中。

<!DOCTYPE html>
<html lang="en">
  <head>
    <style lang="scss">
        html, body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }

        .item-value {
            display: flex;
            position: relative;
            width: 100%;
            height: 20px;
            display: flex;
            align-items: center;

            &::before {
               content: '';
               height: 5px;
               background: #000;
               width: 100%;
               background: #ddd;
               border-radius: 3px;
           }

            .min-range, .max-range {
                height: 25px;
                width: 100%;
                margin: 0;
                padding: 0;
                border: 0;
                outline: none;
                background: transparent;
                -webkit-appearance: none;
                -moz-appearance: none;
                pointer-events: none; // Prevent mouse interaction on the range slider.
                position: absolute;

                /* For Webkit Browsers (Chrome) */
                &::-webkit-slider-runnable-track {
                    cursor: default;
                    height: 5px;
                    outline: 0;
                    appearance: none;
                    background: #ddd;
                    border-radius: 3px;
                    position: relative;
                }

                &::-webkit-slider-thumb {
                    -webkit-appearance: none;
                    pointer-events: all;
                    background: $red;
                    width: 25px;
                    height: 25px;
                    border-radius: 50%;
                    top: -10px;
                    position: absolute;
                    z-index: 10;
                    cursor: pointer;
                }

                /* For Mozilla Browsers */
                &::-moz-range-track {
                    opacity: 0;
                    pointer-events: none;
                }

                &::-moz-range-thumb {
                    -webkit-appearance: none;
                    pointer-events: all;
                    background: $red;
                    width: 25px;
                    height: 25px;
                    border-radius: 50%;
                    top: -5px;
                    position: absolute;
                    z-index: 10;
                    cursor: pointer;
                    border: 0;
                }

                /* For Edge Browsers */
                &::-ms-track {
                    pointer-events: all;
                }

                &::-ms-thumb {
                    border: none;
                    height: 25px;
                    width: 25px;
                    border-radius: 50%;
                    background: $red;
                    pointer-events: all;
                }

                &::-ms-tooltip {
                    display: none;
                    pointer-events: all;
                }
            }
        }
        }
    </style>
  </head>

  <body>
        <section class="item-value">
            <input type="range" value="10" class="min-range">
            <input type="range" value="10" class="max-range">
        </section>
  </body>
</html>

在 &::-ms-thumb {} 中，指针事件:全部；不工作，

我希望它重新启用指针事件，以便可以再次使用句柄，这发生在 &::-webkit-slider-thumb {} 和 &::-moz-range-thumb {}

最佳答案

添加相同的 html 和 css 代码使其可在此处运行

<!DOCTYPE html>
<html lang="en">
  <head>
    <style lang="scss">
        html, body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }

        .item-value {
            display: flex;
            position: relative;
            width: 100%;
            height: 20px;
            display: flex;
            align-items: center;

            &::before {
               content: '';
               height: 5px;
               background: #000;
               width: 100%;
               background: #ddd;
               border-radius: 3px;
           }

            .min-range, .max-range {
                height: 25px;
                width: 100%;
                margin: 0;
                padding: 0;
                border: 0;
                outline: none;
                background: transparent;
                -webkit-appearance: none;
                -moz-appearance: none;
                pointer-events: none; // Prevent mouse interaction on the range slider.
                position: absolute;

                /* For Webkit Browsers (Chrome) */
                &::-webkit-slider-runnable-track {
                    cursor: default;
                    height: 5px;
                    outline: 0;
                    appearance: none;
                    background: #ddd;
                    border-radius: 3px;
                    position: relative;
                }

                &::-webkit-slider-thumb {
                    -webkit-appearance: none;
                    pointer-events: all;
                    background: $red;
                    width: 25px;
                    height: 25px;
                    border-radius: 50%;
                    top: -10px;
                    position: absolute;
                    z-index: 10;
                    cursor: pointer;
                }

                /* For Mozilla Browsers */
                &::-moz-range-track {
                    opacity: 0;
                    pointer-events: none;
                }

                &::-moz-range-thumb {
                    -webkit-appearance: none;
                    pointer-events: all;
                    background: $red;
                    width: 25px;
                    height: 25px;
                    border-radius: 50%;
                    top: -5px;
                    position: absolute;
                    z-index: 10;
                    cursor: pointer;
                    border: 0;
                }

                /* For Edge Browsers */
                &::-ms-track {
                    pointer-events: all;
                }

                &::-ms-thumb {
                    border: none;
                    height: 25px;
                    width: 25px;
                    border-radius: 50%;
                    background: $red;
                    pointer-events: all;
                }

                &::-ms-tooltip {
                    display: none;
                    pointer-events: all;
                }
            }
        }
        }
    </style>
  </head>

  <body>
        <section class="item-value">
            <input type="range" value="10" class="min-range">
            <input type="range" value="10" class="max-range">
        </section>
  </body>
</html>

关于html - 支持 Microsoft Edge 的多范围 slider ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59225524/

文章推荐： javascript - 使用 css 和 javascript 的行星位置？

文章推荐： c++ - 找到黑白图像的边缘

文章推荐： javascript - Web 通知 API 示例每天通知一次

microsoft-edge - 如何在 Edge 浏览器中通过注册表更改主页
我想通过注册表更改 Edge 浏览器中的主页，但它是加密的，我在注册表中看到( protected - 修改违反 Windows 策略。请参阅 aka.ms/browserpolicy)。请帮助我在注
microsoft-edge - Microsoft Edge 浏览器编码
如果我开发一个网站，它是否会以相同的方式在 IE11、Chrome、Firefox 和 edge 上运行，还是我们需要专门为 IE11 编写代码？我没有 Windows 8，因此无法在边缘浏览器上测试
microsoft-edge - Microsoft Edge 浏览器编码
如果我开发一个网站，它是否会以相同的方式在 IE11、Chrome、Firefox 和 edge 上运行，还是我们需要专门为 IE11 编写代码？我没有 Windows 8，因此无法在边缘浏览器上测试
microsoft-edge - 我们如何检查日志或调试 Microsoft Edge？
如果 Edge 在某些机器上发生崩溃，我们需要检查日志以了解发生了什么情况。最佳答案 Microsoft Edge 实际上是一个 Windows 进程，因此您应该能够在事件查看器中查看日志。此外，您
microsoft-edge - 如何默认 Edge 扩展默认显示在地址栏旁边
我们公司已将 Chrome 扩展程序移植到 Edge。扩展工作正常，但弹出窗口本身有很多重要内容。如果您在扩展设置中切换“地址栏旁边的显示按钮”，边缘扩展似乎只显示弹出按钮。这通常是一种糟糕的用户体验
microsoft-edge - 如何关闭 Microsoft Edge 中的友好错误消息
我正在尝试在 Microsoft Edge 中调试崩溃的应用程序，但它提供了友好的错误页面: This page is having a problem loading We tried to loa
microsoft-edge - 超越 Microsoft Edge 朗读速度限制
经过长时间的研究，我创建了我的最佳电子书 (Epub) 阅读器。作为主要设备，我基本上使用 Windows 10 平板电脑和 Microsoft Edge 作为 (Epub) 阅读器。这是伟大的和惊
microsoft-edge - 使用注册表或命令行获取 Microsoft Edge 浏览器版本
如何使用注册表或命令行获取 Microsoft Edge 浏览器版本？我不想从 UI 中获取它。最佳答案对于 Microsoft Edge Legacy ，您可以使用 Get-AppxPacka
microsoft-edge - 如何确定 Microsoft Edge 是否为默认浏览器？
是否有可靠的编程方式来确定 Microsoft Edge 是默认浏览器？我知道一种选择是使用 IApplicationAssociationRegistration::QueryCurrentDef
microsoft-edge - 页面如何符合 Microsoft Edge 中的阅读模式？
当人们在 Edge 中浏览网站时，很高兴看到“阅读 View ”按钮已启用。想要了解一个页面如何适合阅读模式。这将有助于开发人员在开发网站时牢记阅读模式。最佳答案答案来自 Microsoft Ed
microsoft-edge - 批准 Microsoft Edge 扩展需要多长时间？
我们在三周前向申请表提交了 Microsoft Edge 扩展:https://aka.ms/extension-request . 我们还没有收到任何反馈，在开发者仪表板中提交扩展包时，我们收到以下
microsoft-edge - 如何从 WSL2 启动 Edge？
我可以运行 code 从 WSL2 内部启动 VSCode。我将如何启动 Edge(当前基于 Chromium 的 Edge)？我试过了: ~/Code/company/workshops-web
microsoft-edge - Microsoft Edge 在后退/前进按钮上请求新页面
最新版本的 Microsoft Edge 浏览器 (41.162...) 在单击后退和前进按钮时请求新页面。我在多个平台上测试了多个浏览器，只有 Edge 表现出这种行为。这是一个 test pag
microsoft-edge - 为什么打开 Microsoft Edge 开发工具会重新加载当前页面？
我在 Windows 1803 版本 17134.376 中使用 Microsoft Edge。我有一个在 IIS 中本地运行的 ASP.NET Core 网站。该网站在 Edge 中可以正常打开，
css - edge microsoft edge(桌面)不加载谷歌字体
Edge on Desktop 未加载谷歌字体。事实上，它甚至没有使用被定义为回退的“sans-serif”。此行为不会在 Mobile Edge 中复制。 How it should look l
azure-iot-edge - Azure IoT Edge 模块日志位置
iotedge logs 暴露的日志在哪里？命令存储？通常在 Linux 上会在哪里？最佳答案只需执行 docker inspect 及以下 LogPath您将获得容器的当前位置。例如。对于
microsoft-edge - Webcomponents polyfills 在 Edge 上失败
我正在尝试将 Polymer 2 组件集成到现有的 SPA([ab] 使用 JSF 构建)。只要我的 POC 在 Chrome 中运行，我的基础知识就可以正常工作，我真的不在乎它是在 Shadow 还
microsoft-edge - 如何向 Microsoft 报告 Edge 浏览器中的问题？
我们的大型单页 JavaScript 应用程序在 Edge 浏览器中根本无法运行。 (我们在 Chrome 和 Firefox 中正式支持它，我们不允许在 IE 中使用它，因为它只能在那里工作一半，我
wordpress - Microsoft Edge 16 中的图像被压缩 - Edge 中的小图像
Microsoft Edge 16 中存在错误(已多次报告并在此处确认:https://developer.microsoft.com/en-us/microsoft-edge/platform/is
wordpress - Microsoft Edge 16 中的图像被压缩 - Edge 中的小图像
Microsoft Edge 16 中存在错误(已多次报告并在此处确认:https://developer.microsoft.com/en-us/microsoft-edge/platform/is

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 支持 Microsoft Edge 的多范围 slider