Modify the slider control so that the axis (rail, track) disappears

UI Builder
1

I want to modify the slider control (components–>Form–Slider) so that the axis disappears. I can inspect the code that the slider produces in chrome and find the two places where the opacity needs to be set to 0, but I don’t know where or how to access that code from UI Builder.

.bl-slider .bl-slider-rail {
color: rgba(51, 122, 183, 0.38);
opacity: 1;
}

.bl-slider .bl-slider-track {
color: #337ab7;
opacity: 1;
}

I have tried playing with the Ui Builder logic in the UI Library–>Component–Classes logic block similar to how I have modified styles successfully, but to no avail.

I would love to know the robust way to do this where I can reuse this elsewhere easily as needed.

Thanks.

2

I haven’t been able to make a ton of headway on this as a novice. I found a post on building tabs How to build the tabs in UI Builder that might be helpful. I think it all has to do with the Class List Logic, so I am playing with that.

PS. I would love if the table of contents of videos (Backendless For Developers | Backendless Backend as a Service Platform) had sub-topics listed under each title. Video content can’t be browsed and searched easily to find the 2 minutes you need in a sea of 15 minute videos. I think things like the names of the codeless blocks covered under each title would help adopters get up to speed more quickly. I am happy to try to find this stuff on my own but cannot find a way to do so efficiently. Eventually I’ll get through all the videos but I’m trying to put together a demo app simultaneously.

3

Hello @Owen_Fowler,

what you’re looking for is CSS extensions:

(Extensions topic starts from 9:30, but I recommend watching full video for better understanding of app thematization and customization).

Regarding the documentation, we agree with you, and that’s why we are currently working on text documentation for UI Builder/Codeless. Each block will be documented and easily accessed via search in docs.

Regards,
Stanislaw

1 Like
4

Great, looking forward to the docs.

7

Hi,

I can get the rail of the Slider component to disappear as desired using Theme Extensions, but then the slider isn’t available anymore for use elsewhere in original styling.

I created an Extension called levelSlider with:

 .bl-slider-rail .levelSlider  {
    opacity: 0;
  }

 .bl-slider-track {
    opacity: 0;
  }

As expected, that changes the slider removing the rail and track.

I then try to make is optional rather than always, using custom .levelSlider:

 .bl-slider-rail .levelSlider  {
    opacity: 0;
  }

 .bl-slider-track .levelSlider {
    opacity: 0;
  }

I then try to apply this using the Classes field in the User Interface editor, and by creating various lists in the Class Logic codeless block, or just by typing levelSlider in the Classes logic. It all fails. The .bl-slider-rail and .bl-slider-track are applied within <span>.

image
was one attempt, and another:
image

and:
image

Thanks