Questions about range component

[erperejildo]

https://taiga-ui.dev/components/range

All components I tested work, but all of them seem to be too small compared to the ones displayed from the DOCS. This is not happening only for this one.
Here I have for example a range slider:

<tui-range [formControl]="control" [min]="minValue" [max]="maxValue" [step]="1" size="m" />
<tui-range [formControl]="control" [min]="minValue" [max]="maxValue" [step]="1" size="s" />

Sizes are different but even M is not big enough:

I only find these 2. Is there a bigger one like L/XL?

Also when I grab the dot I don't see it moving, but when I leave it, it goes to the right position.

How I detect the value was updated?

Info:

• 4.48.0
• Installed all the necessary packages to make the component work
• I don't have a global style changing this. I was using before 2 different slider components and they looked ok

[waterplea]

Could it be that you html tag has font-size smaller than 16px? Our library is all in rem units so you can control the scale by scaling root font-size. You can just move your font-size to body if that's the case. As for dragging, did install Taiga UI manually or with ng add? Check that all the steps are done:
https://taiga-ui.dev/getting-started

I didn't understand you last bullet but I think I answered that in a separate question about two-color slider.

[erperejildo]

No, I don't really have anything, but worst case scenario if the font-size is the only thing affecting it, I could make it bigger anyways using css (if there is no L/XL size I mean, I need it much bigger).

I installed Taiga manually. Checking again, I forgot about the providers part since I had no main.ts. I refactored it and removed platformBrowser().bootstrapModule by bootstrapApplication():
bootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));

export const appConfig: ApplicationConfig = {
  providers: [
    // Taiga UI providers
    provideAnimations(),
    provideEventPlugins(),
...

but after all of this it is the same, no animation.
I also tried to remove these 2 providers from your example, and the animation is still working there so I don't think this is related.

About knowing the updated value, what I mean is that I miss some info from the docs on how could I detect the different component events. For example, HERE I see nzOnAfterChange or ngModelChange.

[waterplea]

We use standard Angular forms, not custom events our outputs like ant design has. To use Taiga UI you need to be familiar enough with Angular and its practices. As for the rest, I'm afraid I cannot debug it remotely and you would have to create a github repo with reproduction for me to be able to provide any meaningful feedback.

[erperejildo]

I am familiar enough with Angular and its practices, but not with this library, that's why I need to check the docs and in case something is missing or not clear, I need to ask. So I'm not sure wether I should use ngModelChange or not for example (I do know now but I have to be manually checking).

I tested card component and it had open/close animation so after testing a bunch of components, the only missing thing was the icons (something you mentioned that has an open PR to use any font-icon with it) so I moved forward with the implementation. If this problem is not something already known it is fine, I can dig into it myself, but I can't create a repo since this is a big company project and I can't reproduce it in the same way.

[erperejildo]

I tested the slider component and this one looks "all" fine. With the range I notised these issues:

• Pin box-shadow is not completed centered (happening also to the slider)
  edit: this one was fixed after upgrading from 4.48.0 to 4.49.0
• Line is outside the pin
• I can put one pin on top of the other one
  edit: found both issues. This is due to the missing --tui-inline var as explained below

(don't mind the laggy animation, it's fixed)

Screen.Recording.2025-08-13.at.12.38.29.mov

I'm importing these 2 as docs mention:

@import "@taiga-ui/core/styles/taiga-ui-theme.less";
@import "@taiga-ui/core/styles/taiga-ui-fonts.less";

I understand that these could be related to my project (at least one of them was no), because I was testing HERE (the package.json is the same one I have) and I'm not able to reproduce it, but any general idea about these issue could be really handy to find the fix. Do you remember anyone having this maybe?

My first clue is Bootstrap having some conflicts with this (but not sure why it doesn't affect slider component also).

Edit: for the pin position, there are some missing css vars

Is there any other .less that I should import? I'm installing the dependencies manually (I don't have an angular.json, I use webpack)

[waterplea]

Do you have your app wrapped around with tui-root component?

[erperejildo]

that fixed it, thanks