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

    inputNumberSlider different colors

    kirio Newbie

      Hello

       

      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?

       

      Thanks

        • 1. Re: inputNumberSlider different colors
          Pavol Pitonak Master

          Hi,

           

          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.

           

          Regards,

          Palo

          • 2. Re: inputNumberSlider different colors
            kirio Newbie

            Hi,

             

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

             

            /**

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

            * rich:inputNumberSlider

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

            */

            .rich-slider {

             

            }

            .rf-insl-trc{

                      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;

            }

             

            BR