Customize slider

PennController for IBEX Forums Support Customize slider

Tagged: , ,

This topic contains 2 replies, has 2 voices, and was last updated by Avatar Josiane212 2 months, 3 weeks ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #7134
    Avatar
    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
    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
    Avatar
    Josiane212
    Participant

    Thank you so much! It works perfectly 🙂

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.