Angular Material 滑块方向问题

Question

我有一个 angular material slider 需要驻留在具有 dir="rtl" 样式的 div 中。但是，每当我添加 dir="rtl" 标签时，滑块就会变得一团糟（鼠标无法正确捕获它并且着色不准确）。
这是问题的完整 HTML 示例：

<html>
<head>
    <link rel="stylesheet" href="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.3/angular-material.css">
</head>
<body>
    <div ng-app="MyApp" ng-controller="AppCtrl" dir="rtl">
        <md-slider min="0" max="255" ng-model="value" aria-label="red" id="red-slider">
        </md-slider>
        Value: {{value}}
    </div>
    
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-animate.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-aria.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-messages.min.js"></script>

    <script src="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.3/angular-material.js"></script>
    <script>
        angular.module('MyApp', ['ngMaterial'])
        .controller('AppCtrl', function ($scope) {
        });
    </script>
</body>

我试过改变滑块本身的方向并将其放入另一个 div dir="ltr" 但没有成功。

Answer 1

<html>
<head>
    <link rel="stylesheet" href="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.3/angular-material.css">
    <style>
    [dir=ltr] md-slider .md-thumb {
      left: auto;
      right: auto;
    }
    [dir=ltr] md-slider .md-thumb-container {
        left: 0;
        right: auto; 
    }
    </style>
</head>
<body>
    <div ng-app="MyApp" ng-controller="AppCtrl" dir="rtl">

    <div dir="ltr">
    test
        <md-slider min="0" max="255" ng-model="value" aria-label="red" id="red-slider">
        </md-slider>
     </div>

        Value: {{value}}
    </div>

    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-animate.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-aria.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-messages.min.js"></script>

    <script src="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.3/angular-material.js"></script>
    <script>
        angular.module('MyApp', ['ngMaterial'])
        .controller('AppCtrl', function ($scope) {
        });
    </script>
</body>

当你覆盖它时 class 它似乎有效

Angular Material 滑块方向问题

Angular Material slider direction issues

css

right-to-left

angularjs

angular-material