Слайдер мата не работает должным образом с dir="rtl"
Я хочу создать сайт с поддержкой арабского языка в угловом материале, но когда я даю dir="rtl", у меня возникают проблемы с слайдером мата. когда я нажимаю на большой палец и перетаскиваю его, большой палец движется в обратном направлении.
Я попробовал решение ниже, но оно показывает ошибку: «Невозможно привязаться к «ngModel», поскольку это не известное свойство «mat-slider».
ниже приведен мой пример stackblitz. https://stackblitz.com/edit/45m3gu-suzg2w?file=src%2Fexample%2Fslider-range-example.html
Ответы 2
По направлению CSS статья :
Там, где это возможно, авторам рекомендуется избегать использования направления CSS и вместо этого используйте глобальный атрибут HTML dir.
Если вы напишете <body dir = "rtl"> и удалите направление в CSS для тела и слайдера, слайдер будет работать.
Также вы неправильно используете ngModel. Смотрите пример коврика-слайдера .
Вот stackblitz.
Та же проблема возникает и с ltr, когда вы удаляете dir = "rtl".
Я не понимаю, в чем проблема. При использовании rtl 100 должно быть слева, а 0 — справа, не так ли?
Да, верно, но когда мы удаляем rtl, это вызывает проблемы с поддержкой ltr. это должно работать как с rtl, так и с ltr.
Вы смотрели мой stackblitz? Все то же самое, что и раньше, для ясности я добавил к ползунку дискретный атрибут для метки ползунка и изменил значение по умолчанию со 100 на 20. С dir = "rtl" ползунок перемещается справа налево, с dir = "ltr" или без dir он движется слева направо. . Так в чем проблема? Не могли бы вы уточнить?
Думаю, коврик-слайдер что-то делает под капотом, когда присутствует dir = "rtl". Поэтому удаление его в Inspect может работать неправильно. Если вы измените код в самом stackblitz и обновите его, он будет работать, потому что это всего лишь базовый слайдер.
Да, нам нужно обновить страницу. Мне нужно решение без обновления, оно должно работать.
Теперь я понимаю. Я считаю, что он каким-то образом поддерживается (см. это и это), но, честно говоря, я все еще пытаюсь заставить его работать должным образом.
Попробуйте просто повернуть ползунок на 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>
ТС:
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
-1. Это не так должно работать. Вы вообще не используете rtl, вот в чем вопрос. И у вас возникнут проблемы, если вы попытаетесь добавить метку большого пальца.
Я уже пробовал, но он не работает должным образом, когда вы нажимаете и перетаскиваете большой палец.