代码之家 › 专栏 › 技术社区 › Kinjan Koradiya

使用dir=“rtl”时垫滑块无法正常工作

angular-material angular

1

Kinjan Koradiya · 技术社区 · 1 年前

我想创建一个在角材料中支持阿拉伯语的网站,但当我给出dir=“rtl”时,我面临着垫子滑块的问题。当我点击拇指并拖动它时,拇指会反转。

我已经尝试了下面的解决方案,但它显示了一个错误,即无法绑定到“ngModel”,因为它不是“mat slider”的已知属性。

下面是我的stackblitz示例。 https://stackblitz.com/edit/45m3gu-suzg2w?file=src%2Fexample%2Fslider-range-example.html

2 回复 | 直到 1 年前

1

2

Naren Murali 1 年前

试着将滑块旋转180度,然后我们需要添加 ngModel 在输入拇指级别而不是在垫子滑块级别。

全球风格:

mat-slider.reverse-slider {
  transform: rotateY(180deg);
}

HTML:

<mat-slider class="reverse-slider">
  <input
    matSliderThumb
    [(ngModel)]="sliderValue"
    [min]="minValue"
    [max]="maxValue"
    [step]="stepValue"
  />
</mat-slider>
<p>Current Value: {{ sliderValue }}</p>

TS:

import { Component } from '@angular/core';
import { MatSliderModule } from '@angular/material/slider';
import { FormsModule } from '@angular/forms';

/**
 * @title Basic slider
 */
@Component({
  selector: 'slider-overview-example',
  templateUrl: 'slider-overview-example.html',
  styleUrl: 'slider-overview-example.css',
  standalone: true,
  imports: [MatSliderModule, FormsModule],
})
export class SliderOverviewExample {
  minValue: number = 0;
  maxValue: number = 100;
  stepValue: number = 1;
  sliderValue: number = this.maxValue;
}

Stackblitz Demo

2

1

Tortila 1 年前

根据CSS方向 article :

在可能的情况下,鼓励作者避免使用该方向 CSS属性,并使用HTML-dir全局属性。

如果你写 <body dir="rtl"> 并在CSS中删除主体和滑块的方向,滑块就会工作。

此外,您没有正确使用ngModel。查看垫子滑块 example .