How do I change the Sliderbar thumb?

0 favourites
  • 2 posts
From the Asset Store
Custom Slider Bar Tutorial. I don't have other remaining words to type here
  • Hello,

    I need to change the thumb of the Sliderbar, but I can't access it.

    .slider {
     -webkit-appearance: none;
     width: 100%;
     height: 15px;
     border-radius: 5px;
     background: #d3d3d3;
     outline: none;
     opacity: 0.7;
     -webkit-transition: .2s;
     transition: opacity .2s;
    .slider::-webkit-slider-thumb {
     -webkit-appearance: none;
     appearance: none;
     width: 25px;
     height: 25px;
     border-radius: 50%;
     background: #FF0000;
     cursor: pointer;

    The CSS code above can access ".slider" and ".slider::-webkit-slider-thumb". I can access the first one directly using the Sliderbar->Set CSS Style action. How can I access the second one (::-webkit-slider-thumb)?

    I have to use C2 runtime, and can't use Browser->Load Stylesheet ..



  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • OK, I tried changing the CSS sheet of the exported HTML5, and it worked. But have no idea if that would work when exporting to Android.

    Tried executing this using the browser plug-in:

    document.styleSheets[0].addRule('#sliderID', '-webkit-appearance: none');
    document.styleSheets[0].addRule('#sliderID::-webkit-slider-thumb', '-webkit-appearance: none');
    document.styleSheets[0].addRule('#sliderID::-webkit-slider-thumb', 'background: #FF0000');

    It worked when I tried it in a sample html page. Didn't work in editor. As apk, when the code executes the slider disappears all together!

    Ended up making my own slider! Pinning a circle sprite (with DragDrop) to a bar sprite (rope style).

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)