PennController for IBEX › Forums › Support › Customize slider
Tagged: aesthetics, css, slider
- This topic has 5 replies, 3 voices, and was last updated 2 years, 6 months ago by
mschrumpf.
-
AuthorPosts
-
July 28, 2021 at 10:42 am #7134
Josiane212
ParticipantHi,
I’d like to customize a slider for an experiment, the default one does not fit what I need.
I saw on another forum post that the best way to do so is with CSS magic.newScale("Main_Slider", 100) .slider() .css({"max-width" : "none", "width" : "400px", "height" : "100px"}) .center() .print() .log()
I’m able to change the width with
.settings.css
, but I can’t change the color of the slider, the handle and other things like that.
When I’m modifying the PennController.css file to make it work (by copy-pasting parts of the w3schools code), nothing seems to apply to the slider. I tried changing.slider
to the name of my element.Main_Slider
but still nothing changes.I’m quite new to javascript and css, so any help is appreciated! Thank you very much 🙂
July 28, 2021 at 11:34 am #7137Jeremy
KeymasterHi,
If you haven’t read it yet, I recommend you take look at this guide: Adding custom CSS
However the code I use to parse CSS at the PCIbex Farm has some bugs, so it’s often a better idea to edit global_main.css directly rather than relying on PennController.css automatically prefixing class names with
PennController-
. Another tricky thing is that when generating class names from element names, PennController will drop all underscores (_
) so your Scale element’s CSS class name will beMainSlider
, notMain_Slider
Here is what I added to global_main.css to get the desired rendering:
.PennController-MainSlider { width: 100%; /* Width of the outside container */ } /* The slider itself */ .PennController-MainSlider input { -webkit-appearance: none; /* Override default CSS styles */ appearance: none; width: 100%; /* Full-width */ height: 25px; /* Specified height */ background: #d3d3d3; /* Grey background */ outline: none; /* Remove outline */ opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */ -webkit-transition: .2s; /* 0.2 seconds transition on hover */ transition: opacity .2s; } /* Mouse-over effects */ .PennController-MainSlider input:hover { opacity: 1; /* Fully shown on mouse-over */ } /* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */ .PennController-MainSlider input::-webkit-slider-thumb { -webkit-appearance: none; /* Override default look */ appearance: none; width: 25px; /* Set a specific slider handle width */ height: 25px; /* Slider handle height */ background: #04AA6D; /* Green background */ cursor: pointer; /* Cursor on hover */ } .PennController-MainSlider input::-moz-range-thumb { width: 25px; /* Set a specific slider handle width */ height: 25px; /* Slider handle height */ background: #04AA6D; /* Green background */ cursor: pointer; /* Cursor on hover */ }
Let me know if you have questions
Jeremy
July 28, 2021 at 1:07 pm #7138Josiane212
ParticipantThank you so much! It works perfectly 🙂
February 21, 2022 at 6:37 am #7777mschrumpf
ParticipantHello,
I have a similar problem. I want to increase the width of a few slider elements. I have tried several methods including the ones discussed here, but nothing so far has increased the width of the slider beyond ~160 pixels.
I tried setting the width of the elements themselves with different units (%, px, in, cm), I tried editing the global_main.css and slider.css, and even the Scale.js module, but none of these had an effect.What’s the most reliable way of increasing the width of a slider scale element?
Thanks
Matthias
February 21, 2022 at 8:26 pm #7781Jeremy
KeymasterHello Matthias,
It would be easier to assist you with a link to your project. The most reliable way of increasing the width of a slider scale element is to use CSS rules in a CSS file named
global_*.css
in the project’s Aesthetics folder, as described on this thread. To overwrite the constraint on the slider’s maximum length that PennControler sets by default, addmax-width: unset !important;
to the CSS rules that apply to the Scale element (.PennController-MainSlider
in the example above)Jeremy
February 22, 2022 at 11:11 am #7782mschrumpf
ParticipantHello Jeremy,
I have solved this problem in the meantime. The solution was to simply include “max width”: “none” in the css settings of the element in the main script:newScale("Originell", 100) .slider() .settings.css({ "max-width" : "none", "width": "450px", "margin": "auto", "align": "center", "text-align": "center" }) .before(newText("label3", "gar nicht   ")) .after(newText("label4", "   perfekt")) .center() .print() .log()
-
This reply was modified 2 years, 6 months ago by
mschrumpf.
-
This reply was modified 2 years, 6 months ago by
-
AuthorPosts
- You must be logged in to reply to this topic.