Customize slider

PennController for IBEX Forums Support Customize slider

Tagged: , ,

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #7134
    Josiane212
    Participant

    Hi,

    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 🙂

    #7137
    Jeremy
    Keymaster

    Hi,

    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 be MainSlider, not Main_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

    #7138
    Josiane212
    Participant

    Thank you so much! It works perfectly 🙂

    #7777
    mschrumpf
    Participant

    Hello,
    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

    #7781
    Jeremy
    Keymaster

    Hello 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, add max-width: unset !important; to the CSS rules that apply to the Scale element (.PennController-MainSlider in the example above)

    Jeremy

    #7782
    mschrumpf
    Participant

    Hello 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, 3 months ago by mschrumpf.
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.