Question

我有一个angular material slider需要驻留在div样式dir="rtl"内。但是，当我添加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

＆＃13;

<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>

＆＃13;

当你覆盖这个类时，它似乎可以工作

角度材质滑块方向问题

1 个答案: