Guys, please tell me how you can implement (stylize) the slider so that its fill bar expands smoothly from left to right. Specifics: how to make the slider so that at first it was 4px high, and at the end (width: 1920px;) its height was 32px?

Stuck guard as. Already the third day I do not sleep. Help, eh? And if there is an opportunity - explain how you managed to implement it?

<script type="text/javascript"> $("#slider").slider({ min: 0, max: 100, values: [0,100],  range: true }); </script>

CSS

 /* Π¨ΠΈΡ€ΠΈΠ½Π° слайдСра */ #slider { width: 200px; } /* ΠšΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ слайдСра */ .ui-slider {   position: relative; } /* ΠŸΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ */ .ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 13px; /* Π—Π°Π΄Π°Π΅ΠΌ Π½ΡƒΠΆΠ½ΡƒΡŽ ΡˆΠΈΡ€ΠΈΠ½Ρƒ */ height: 13px; /* ΠΈ высоту */ cursor: pointer } .ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; overflow: hidden;} /* Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹ΠΉ слайдСр (сама полоса ΠΏΠΎ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ Π±Π΅Π³Π°Π΅Ρ‚ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ) */ .ui-slider-horizontal { Height: 3px; /* Π·Π°Π΄Π°Π΅ΠΌ высоту */ } /* ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΡƒΠ΅ΠΌ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠΈ */ .ui-slider-horizontal .ui-slider-handle {  top: -5px; margin-left: -6px; } .ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; } .ui-slider-horizontal .ui-slider-range-min { left: 0; } .ui-slider-horizontal .ui-slider-range-max { right: 0; } /* ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅ полосы ΠΏΠΎ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ Ρ…ΠΎΠ΄ΠΈΡ‚ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ */ .ui-widget-content { border: 1px solid #D4D4D4;   background: #fff; } /* ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅ Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ участка (ΠΌΠ΅ΠΆΠ΄Ρƒ двумя ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠ°ΠΌΠΈ) */ .ui-widget-header { border: 1px solid #D4D4D4; background: #f00; } /* скруглСниС для полосы слайдСра */ .ui-corner-all {   -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; }

That's what I want to get jQuery slider

  • one
    Complete the message with your code, then it will be easier to help you. - kizoso

2 answers 2

You can make a similar mechanism using SVG:

 var i = document.getElementsByTagName('input')[0], polygon = document.getElementById('fill'); function slide(e){ var pos = +i.value; polygon.setAttribute("points", "0,16 "+pos+","+(16+ (pos*16)/400)+" "+pos+","+(16-(pos*16)/400)); } 
 <svg width="400" height="32"> <polygon points="0,16 400,32 400,0" fill="rgba(255,255,255,0)" stroke-width="1" stroke="rgb(0,0,0)"/> <polygon id="fill" points="" fill="rgb(255,222,77)" stroke-width="0" stroke="rgb(0,0,0)"/> </svg> <input oninput="slide()" type="range" min="0" max="400" step="1" value="0">

  • Very interesting. I'm going to try now. Can you explain what's what? In order to know how to do it. I'm not good at it. I mean, I can only take it ready and change it for myself - Olejjon
  • @Olejjon If you are given an exhaustive answer, mark it as correct (a daw opposite the selected answer) and do not forget to thank the author for the good answer - Alexandr_TT

Put a triangle on top. For example, a triangle from the border :

 .bar { background: rgb(133, 124, 211); background: -moz-linear-gradient(-45deg, rgba(133, 124, 211, 1) 0%, rgba(112, 176, 224, 1) 100%); background: -webkit-linear-gradient(-45deg, rgba(133, 124, 211, 1) 0%, rgba(112, 176, 224, 1) 100%); background: linear-gradient(135deg, rgba(133, 124, 211, 1) 0%, rgba(112, 176, 224, 1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#857cd3', endColorstr='#70b0e0', GradientType=1); height: 48px; position: relative; } .bar:before { content: " "; border: 44px solid #ccc; border-color: #fff transparent; border-width: 44px 99vw 0 0; top:0; position:absolute; } 
 <div class=bar></div>

  • I tried it. They did not work out ... Nothing happened in general - Olejjon
  • Oooh, stop! =) The cone turned out great. And now change its css. Width through events in JS, right? - Olejjon