角度材质滑块方向问题答案

【问题标题】：Angular Material slider direction issues角度材质滑块方向问题
【发布时间】：2017-06-07 04:22:13
【问题描述】：

我有一个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" 中，但没有成功。

【问题讨论】：

标签： css angularjs angular-material right-to-left

【解决方案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>

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

【讨论】：