2017-05-11 18 views
2

私は範囲スライダのトラックの色を変更する必要があり、私はCSSを試みたが、クロムで、それが動作していない、最後に私はjQueryの(link)を使用して、解決策を見つける、だから私は実現したが、私が期待した出力を得ていないのです。範囲スライダのトラックの色を変更する方法は?

のjQuery: https://plnkr.co/edit/yMg8bKSrbam6RmtgdBl4?p=preview

それは、jqueryのを使用せずに、純粋なJavaScriptやangularjsで可能ですまた、jqueryのためにplunkerに示すように動作していない:

$('.text-size-slider .slider').change(function() { 
     var val = ($(this).val() - $(this).attr('min'))/($(this).attr('max') - $(this).attr('min')); 

     $(this).css('background-image', 
        '-webkit-gradient(linear, left top, right top, ' 
        + 'color-stop(' + val + ', #94A14E), ' 
        + 'color-stop(' + val + ', #C5C5C5)' 
        + ')' 
       ); 
    }); 

はここに私のplunkerです。

予想される出力:

enter image description here

任意の助けいただければ幸いです。 私に助けてください。私は多くを試みましたが、それを得ることができませんでした。

答えて

1

を交換してください、私はあなたのディレクティブを更新している、あなたはこのplunkerで

"https://plnkr.co/edit/UPh0guqcXxO6ivSljh8R?p=preview" 
+0

ご協力いただきありがとうございます。ここにいくつかの問題があります。つまり、デフォルト値(18)をオンに設定しています負荷がかかりますが、色は値段ではありません。これで私を助けることができますか? – pbsbr

+0

調整されている場合、問題は解決されます。 – pbsbr

+0

ねえ、ありがとう、それは私のために働く – pbsbr

0

のstyle.css

body { 

    color: red; 
    font-family: "HelveticaNeue", "Helvetica Neue", "Helvetica Neue", Helvetica, Arial, sans-serif; 
    font-weight: normal; 
    margin: 0; 
} 

header { 

    background-color: white; 
    padding: 60px 40px; 
} 


h1 { 
    font-size: 200%; 
} 

h3 { 
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif; 
    font-weight: normal; 
} 

p { 
    font-size: 90%; 
    font-weight: normal; 
} 

article { 
    -webkit-column-count: 4; 
    column-count: 4; 
} 

p { 
    margin: 0px; 
} 

/** 
* Text Slider Directive - CSS 
**/ 
.text-size-slider { 
    line-height: 100%; 
    font-size: 14px; 
    position: relative; 
} 

.text-size-slider .small-letter,.text-size-slider .big-letter 
{ 
    font-weight: bold; 
} 

.text-size-slider .slider { 
    -webkit-appearance: none; 
    margin: 0px 8px; 
} 

.text-size-slider .slider:focus { 
    outline: none; 
} 

.text-size-slider .slider::-webkit-slider-thumb { 
    border: none; 
    cursor: pointer; 
    -webkit-appearance: none; 
    background-color: rgba(192, 35, 74, 1); 
    width: 15px; 
    height: 15px; 
    border-radius: 50%; 
    margin-top: -6px; 
} 
.text-size-slider .slider::-moz-range-thumb { 
    border: none; 
    cursor: pointer; 
    -webkit-appearance: none; 
    background-color: rgba(192, 35, 74, 1); 
    width: 18px; 
    height: 18px; 
    border-radius: 50%; 
    margin-top: -6px; 
} 
.text-size-slider .slider::-ms-thumb { 
    border: none; 
    cursor: pointer; 
    -webkit-appearance: none; 
    background-color: rgba(192, 35, 74, 1); 
    width: 15px; 
    height: 15px; 
    border-radius: 50%; 
    margin-top: -6px; 
} 

.text-size-slider .slider::-webkit-slider-thumb::before { 
content:"YEAH"; 
display:block; 
background:red !important; 
height:20px; 
width:20px; 
position:absolute; 
top:-20px; 
left:-10px; 
} 
.text-size-slider .slider::-webkit-slider-thumb::after { 
content:"YEAH"; 
display:block; 
background:green !important; 
height:20px; 
width:20px; 
position:absolute; 
top:-20px; 
left:-10px; 
} 
.text-size-slider .slider::-moz-range-thumb::before { 
content:"YEAH"; 
display:block; 
background:rgba(192, 35, 74, 1); 
height:20px; 
width:20px; 
position:absolute; 
top:-20px; 
left:-10px; 
} 

.pointer { 
    vertical-align:top; 
    height: 40px; 
    width: 40px; 
    border-radius:20px 20px 0 20px; 
    background-color:rgba(192, 35, 74, 1); 
    display:block; 
    transform: rotate(45deg); 
    position:absolute; 
    top: -39px; 
    margin-left:14px; 

    color:black; 

} 

.pointer span { 
    display: inline-block; 
    transform: rotate(-45deg); 
    margin-left:12px; 
    margin-top: 14px; 
    color:white; 


} 

.text-size-slider .slider::-webkit-slider-runnable-track { 
    width: 100%; 
    height: 2px; 
    cursor: pointer; 

    border: 0; 
} 
.text-size-slider .slider::-ms-track { 
    width: 100%; 
    height: 2px; 
    cursor: pointer; 
    background: yellow; 
    border: 0; 
} 
.text-size-slider .slider::-moz-range-track { 
    width: 100%; 
    height: 2px; 
    cursor: pointer; 
    background-color: #ddd; 
    border: 0; 
} 
.text-size-slider .slider::-moz-range-progress { 
    background-color: rgba(192, 35, 74, 1); 
    height: 2px; 
} 
.text-size-slider .slider::-webkit-progress-value { 
    background-color: orange; 
}{ 
    background-color: rgba(192, 35, 74, 1); 
} 
@-moz-document url-prefix() { .pointer { top: -40px; } } 

.text-size-slider .slider::-ms-fill-lower { 
    background: yellow; 
    border-radius: 0; 
    } 

    .text-size-slider .slider::-ms-fill-upper { 
    background: black; 
    border-radius: 0; 
    } 
.text-size-slider .slider{ 
    -webkit-appearance: none; 
    -moz-apperance: none; 
    /*! border-radius: 6px; */ 
    height: 0px; 
    background-image: -webkit-gradient(linear, left top, right top, color-stop(0.15, #ddd), color-stop(0.15, #ddd)); 
} 

.text-size-slider .slider::-webkit-slider-thumb { 
    -webkit-appearance: none !important; 
    background-color: #E9E9E9; 
    border: 1px solid #CECECE; 
    height: 15px; 
    width: 15px; 
} 
+0

を確認することができます申し訳ありませんが、私は親指の前と後のトラックのための2つの色を必要とします。 – pbsbr

+0

イメージを置くことができますか?正確にあなたが一度それをチェックしてくださいすることができ、私は疑問に画像を更新リンクhttps://plnkr.co/edit/ECU2nx3hDQXj4HBaXuwp?p=preview –

+0

たい、それが結果は期待していました。 –

関連する問題