2 Replies Latest reply on Jun 7, 2011 2:36 AM by kirio

    inputNumberSlider different colors

    kirio Newbie



      I'm starting with developing custom components based on the richfaces and faced problem that I need to have 2 different colors of the track before the handler and after. I was trying to change CSS styles for the .rich-inslider-track-decor1(2), but that's not that property that I need.

      Could someone help me with appropriate property or I need to write some handler?



        • 1. Re: inputNumberSlider different colors
          Pavol Pitonak Master



          you can try to set multiple backgrounds in class .rf-insl-trc. More info in http://www.css3.info/preview/multiple-backgrounds/. It should be supported in all major browsers.




          • 2. Re: inputNumberSlider different colors
            kirio Newbie



            as far as I understood I need something like this, but it doesn't work. Could you please help



            * ---------------------------------------------

            * rich:inputNumberSlider

            * ---------------------------------------------


            .rich-slider {




                      background: url("graphic/inputNumberSlider.png) left top repeat-x, url("graphic/inputNumberSlider1.png) left top repeat-x;


            .rich-inslider-track {

                      height: 14px;

                      border: 1px solid #666666;

                      -moz-border-radius: 10px;

                      background-image: none;

                      border-radius: 10px;

                      display: block;

                      font-size: 0;

                      width: 200px;





            .rich-inslider-track-decor-2 {

                      opacity: 0; /* hides the default background image */




            .rich-inslider-track-decor-1 {

                      border: none;