Topic: Multirange Bootstrap 5 Angular

mydancebay priority asked 2 years ago


Does Bootstrap 5 Angular Pro version support multirange component?


Arkadiusz Idzikowski staff answered 2 years ago


@mydancebay This component is not available in the current version but we plan to add it to the library in the future as a plugin. You can learn more about upcoming features in our roadmap:

https://mdbootstrap.com/docs/b5/roadmap/

Edit: You can add this code to the styles.scss to customize the thumb color:

// thumb
.range .thumb:after {
  background: red;
}

// track
.range input[type='range'] {
  &::-webkit-slider-thumb {
    background: red;
  }
  &::-moz-range-thumb {
    background: red;
  }
  &::-ms-thumb {
    background: red;
  }
}

mydancebay priority commented 2 years ago

Thank you for answer. And any chances to customize styles for current range component? I mean colors.


Arkadiusz Idzikowski staff commented 2 years ago

@mydancebay What exactly do you need to customize?


mydancebay priority commented 2 years ago

@Arkadiusz Idzikowski I need customize "range dot" color , also I need range thumb span is active all timenot only when I move it to the some side. enter image description here


Arkadiusz Idzikowski staff commented 2 years ago

@mydancebay I edited my answer and added an example code that you can use to customize the thumb color. It is not possible to display this element as active using styles because we update its position only when the input value change. We will check if we can correctly set the default position of the thumb on component initialization.


mydancebay priority commented 2 years ago

Thank you @Arkadiusz Idzikowski! And what about changing color for this element? I had some tries, but can't do it myself ( enter image description here


Arkadiusz Idzikowski staff commented 2 years ago

@mydancebay I updated the code in my answer.


mydancebay priority commented 2 years ago

Thank you a lot @Arkadiusz Idzikowski!


norbertbede premium commented 2 years ago

Hi,

i would like to ask when multi-range component will be released ? we are working on e-commerce filters, and no range component available atm. Norbert


Arkadiusz Idzikowski staff commented 2 years ago

@norbertbede It should be available in the next update, but we can't provide an ETA yet.


norbertbede premium commented 10 months ago

hi @Arkadiusz,

i double checkedhttps://mdbootstrap.com/docs/angular/getting-started/changelog/

Version v3.0.0, released 10.10.2022Added new multi range componentredirecting to https://mdbootstrap.com/docs/angular/components/multi-range-slider/ but return 404.

Can you take a look ? it is really introduced, just wrong link ? it is important to us to know.

Norbert


Arkadiusz Idzikowski staff commented 9 months ago

It looks like the link in the changelog is incorrect. You can find multi range docs in the 'forms' section: https://mdbootstrap.com/docs/angular/forms/multi-range-slider/



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: MDB5 1.6.1
  • Device: *
  • Browser: *
  • OS: *
  • Provided sample code: No
  • Provided link: No