CODEWITHSUNDEEP
angular-materialangular-dart
Gazihan Alankus
Gazihan Alankus

Reputation: 11984

Customizing material-slider in AngularDart

I want to customize the <material-slider> component in AngularDart. I want to add a marker to a certain value like so:

------|----O-------

The | here is the marker that I would like to add and the O here is the normal knob of the slider. There won't be any user interaction with the marker, I'll just set it from code.

What's the best way of doing this? Should I reach its DOM and inject something there? Can I extend the MaterialSlider class? Are there any examples that may be helpful?

Upvotes: 1

Views: 145

Answers (1)

Gazihan Alankus
Gazihan Alankus

Reputation: 11984

I ended up displaying the marker behind the material-slider. This way I didn't have to modify the material-slider at all.

I created a parent div with position: relative which has the material-slider and the marker div as children. The marker div has position: absolute and left: 50% to place it right in the middle of the slider.

Other things I explored were:

  • Yes it seems you can extend components, no it's not fun.
  • You can get the dart:html Element of your own component that has the material-slider and add stuff into it. For this, you inject Element to your constructor. However, you have to use it in AfterViewInit to have the material-slider be created as a child. querySelector() helps you get to the Element of material-slider, after which you can do things like slider.children.add()

Upvotes: 1

Related Questions