CSS   22
ion rangeSlider
Guest on 27th August 2023 12:06:24 PM


  1. /* Ion.RangeSlider
  2. // css version 1.8.5.0
  3. // by Denis Ineshin | ionden.com
  4. // ===================================================================================================================*/
  5.  
  6. /* =====================================================================================================================
  7. // RangeSlider */
  8.  
  9. .irs {
  10.     position: relative; display: block;
  11. }
  12.     .irs-line {
  13.         position: relative; display: block;
  14.         overflow: hidden;
  15.     }
  16.         .irs-line-left, .irs-line-mid, .irs-line-right {
  17.             position: absolute; display: block;
  18.             top: 0;
  19.         }
  20.         .irs-line-left {
  21.             left: 0; width: 10%;
  22.         }
  23.         .irs-line-mid {
  24.             left: 10%; width: 80%;
  25.         }
  26.         .irs-line-right {
  27.             right: 0; width: 10%;
  28.         }
  29.  
  30.     .irs-diapason {
  31.         position: absolute; display: block;
  32.         left: 0; width: 100%;
  33.     }
  34.     .irs-slider {
  35.         position: absolute; display: block;
  36.         cursor: default;
  37.         z-index: 1;
  38.     }
  39.         .irs-slider.single {
  40.             left: 10px;
  41.         }
  42.             .irs-slider.single:before {
  43.                 position: absolute; display: block; content: "";
  44.                 top: -30%; left: -30%;
  45.                 width: 160%; height: 160%;
  46.                 background: rgba(0,0,0,0.0);
  47.             }
  48.         .irs-slider.from {
  49.             left: 100px;
  50.         }
  51.             .irs-slider.from:before {
  52.                 position: absolute; display: block; content: "";
  53.                 top: -30%; left: -30%;
  54.                 width: 130%; height: 160%;
  55.                 background: rgba(0,0,0,0.0);
  56.             }
  57.         .irs-slider.to {
  58.             left: 300px;
  59.         }
  60.             .irs-slider.to:before {
  61.                 position: absolute; display: block; content: "";
  62.                 top: -30%; left: 0;
  63.                 width: 130%; height: 160%;
  64.                 background: rgba(0,0,0,0.0);
  65.             }
  66.         .irs-slider.last {
  67.             z-index: 2;
  68.         }
  69.  
  70.     .irs-min {
  71.         position: absolute; display: block;
  72.         left: 0;
  73.         cursor: default;
  74.     }
  75.     .irs-max {
  76.         position: absolute; display: block;
  77.         right: 0;
  78.         cursor: default;
  79.     }
  80.  
  81.     .irs-from, .irs-to, .irs-single {
  82.         position: absolute; display: block;
  83.         top: 0; left: 0;
  84.         cursor: default;
  85.         white-space: nowrap;
  86.     }
  87.  
  88.  
  89. .irs-grid {
  90.     position: absolute; display: none;
  91.     bottom: 0; left: 0;
  92.     width: 100%; height: 20px;
  93. }
  94. .irs-with-grid .irs-grid {
  95.     display: block;
  96. }
  97.     .irs-grid-pol {
  98.         position: absolute;
  99.         top: 0; left: 0;
  100.         width: 1px; height: 8px;
  101.         background: #000;
  102.     }
  103.     .irs-grid-pol.small {
  104.         height: 4px;
  105.     }
  106.     .irs-grid-text {
  107.         position: absolute;
  108.         bottom: 0; left: 0;
  109.         width: 100px;
  110.         white-space: nowrap;
  111.         text-align: center;
  112.         font-size: 9px; line-height: 9px;
  113.         color: #000;
  114.     }
  115.  
  116. .irs-disable-mask {
  117.     position: absolute; display: block;
  118.     top: 0; left: 0;
  119.     width: 100%; height: 100%;
  120.     cursor: default;
  121.     background: rgba(0,0,0,0.0);
  122.     z-index: 2;
  123. }
  124. .irs-disabled {
  125.     opacity: 0.4;
  126. }
  127.  
  128. /* Ion.RangeSlider, Flat UI Skin
  129. // css version 1.8.5
  130. // by Denis Ineshin | ionden.com
  131. // ===================================================================================================================*/
  132.  
  133. /* =====================================================================================================================
  134. // Skin details */
  135.  
  136. .irs-line-mid,
  137. .irs-line-left,
  138. .irs-line-right,
  139. .irs-diapason,
  140. .irs-slider {
  141.     background: url(../images/sprite-skin-flat.png) repeat-x;
  142. }
  143.  
  144. .irs {
  145.     height: 40px;
  146. }
  147. .irs-with-grid {
  148.     height: 60px;
  149. }
  150. .irs-line {
  151.     height: 12px; top: 25px;
  152. }
  153. .irs-line-left {
  154.     height: 12px;
  155.     background-position: 0 -30px;
  156. }
  157. .irs-line-mid {
  158.     height: 12px;
  159.     background-position: 0 0;
  160. }
  161. .irs-line-right {
  162.     height: 12px;
  163.     background-position: 100% -30px;
  164. }
  165.  
  166. .irs-diapason {
  167.     height: 12px; top: 25px;
  168.     background-position: 0 -60px;
  169. }
  170.  
  171. .irs-slider {
  172.     width: 16px; height: 18px;
  173.     top: 22px;
  174.     background-position: 0 -90px;
  175. }
  176. #irs-active-slider, .irs-slider:hover {
  177.     background-position: 0 -120px;
  178. }
  179.  
  180. .irs-min, .irs-max {
  181.     color: #fff;
  182.     font-size: 10px; line-height: 1.333;
  183.     text-shadow: none;
  184.     top: 0; padding: 1px 3px;
  185.     background: #818286;
  186.     border-radius: 4px;
  187. }
  188.  
  189. .irs-from, .irs-to, .irs-single {
  190.     color: #fff;
  191.     font-size: 10px; line-height: 1.333;
  192.     text-shadow: none;
  193.     padding: 1px 5px;
  194.     background: #000;
  195.     border-radius: 4px;
  196. }
  197. .irs-from:after, .irs-to:after, .irs-single:after {
  198.     position: absolute; display: block; content: "";
  199.     bottom: -6px; left: 50%;
  200.     width: 0; height: 0;
  201.     margin-left: -3px;
  202.     overflow: hidden;
  203.     border: 3px solid transparent;
  204.     border-top-color: #000;
  205. }
  206.  
  207.  
  208. .irs-grid-pol {
  209.     background: #818286;
  210. }
  211. .irs-grid-text {
  212.     color: #fff;
  213. }
  214.  
  215. .irs-disabled {
  216. }
Raw Paste

Login or Register to edit or fork this paste. It's free.