Multirange Bootstrap 5 Angular

Topic: Multirange Bootstrap 5 Angular

mydancebay priority asked 2 years ago

Does Bootstrap 5 Angular Pro version support multirange component?

Add comment

Arkadiusz Idzikowski staff answered 2 years ago

Please insert min. 20 characters.

@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 1 year 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

Please insert min. 15 characters.

Arkadiusz Idzikowski staff commented 1 year 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/

Add comment

Write

Create snippet

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

mydancebay

52Support score
9Questions 6Answers 0Snippets