Как сверстать слайдер диапазона значений

Всем привет!
Столкнулся с проблемой верскти не совсем обычного слайдера диапазона значений. До сегодняшнего дня думал, что умею неплохо верстать, оказалось это не совсем так :)
Друзья подскажите, как мне заверстать такой элемент. Пробовал через transform: skewY с псевдоэлементом , но это не лучший способ,- результат не совсем тот.
В общем, друзья, подтолкните меня на правильную мысль, или дайте ссылочку на пример такого элемента Спасибо!

Ответ

Перетаскивание ползунка уж как-нибудь сами прикрутите
$('[type=number]').on('input',function(){ $('.range__value').css('background-size', this.value+'% 100%'); $('.range__btn').css('left',this.value+'%'); }) *{ box-sizing:border-box; } body{ margin:0; padding:15px; } .range{ position:relative; height:20px; } .range__inner{ height:100%; overflow:hidden; position:relative; } .range__value{ height:100%; background:linear-gradient(to right,red,green),#ddd; background-size:50% 100%; background-repeat:no-repeat; transform:rotate(-1.3deg); transform-origin:right center; } .range__btn{ display:inline-block; border:1px solid #bbb; width:20px; height:20px; background-color:#fff; border-radius:0 30px 30px 30px; position:absolute; top:calc(100% + 5px); left:50%; transform:translateX(-50%) rotate(45deg); cursor:pointer; }