How do I change the Sliderbar thumb?

Post reply

❤Follow Topic(2)

0 favourites

2 posts

From the Asset Store

Custom SliderBar Capx

$5 USD

Custom Slider Bar Tutorial. I don't have other remaining words to type here

luckyrawatlucky

- Soul3
- - Joined 7 Apr, 2019
  - 13 topics • 35 posts
- 1
- 10 Feb, 2020
- Quote
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 ..

Thanks!
Tagged:

css
slider-bar
Try Construct 3

Develop games in your browser. Powerful, performant & highly capable.
Try Now Construct 3 users don't see these ads
- Soul3
- - Joined 7 Apr, 2019
  - 13 topics • 35 posts
- 1
- 10 Feb, 2020
- Quote
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).