javascript - ベンダープレフィックス付きのjqueryでcssを変更するには?

Question

jquery ui スライダーのバックグラウンド css をベンダー プレフィックスで変更しようとしています。線形グラデーションを使用しています。ほとんどすべてのブラウザのサポートが必要です。css スタイルシートでベンダー プレフィックスを使用していくつかの css を設定しました。JavaScript を使用してグラデーションを変更したいと考えています。この 5 つのプレフィックスを持つ CSS が必要です

• -ウェブキット-
• -moz-
• -o-
• -MS-

• -khtml-

  ここにjsfiddleがあります

  $(function() {
     $( "#range-slider1" ).slider({
        range:false,
        min: 0,
        max: 360,
        value: 0,
        slide: function( event, ui ) {
           var hue = ui.value,
               sat = $('#range-slider2').slider('value'),
               light = $('#range-slider3').slider('value'),
               alpha = $('#range-slider4').slider('value'),
               hsla = "hsla(" + hue + "," + sat + "%, " + light + "%, " + alpha + ")",
           satRangeW = "-webkit-linear-gradient(left, hsla(" + ui.value + ", 0%, 50%, 1),hsla(" + ui.value + ", 20%, 50%, 1),hsla(" + ui.value + ", 40%, 50%, 1),hsla(" + ui.value + ", 60%, 50%, 1),hsla(" + ui.value + ", 80%, 50%, 1),hsla(" + ui.value + ", 100%, 50%, 1))",
          satRangeMo = "-moz-linear-gradient(left, hsla(" + ui.value + ", 0%, 50%, 1),hsla(" + ui.value + ", 20%, 50%, 1),hsla(" + ui.value + ", 40%, 50%, 1),hsla(" + ui.value + ", 60%, 50%, 1),hsla(" + ui.value + ", 80%, 50%, 1),hsla(" + ui.value + ", 100%, 50%, 1))";
          $("#slidevalue").text(hsla);
          $(".slidevalue").css('background-color', hsla);
          $("#range-slider2").css("background", satRangeW);
  
        }
     });
  
      $( "#range-slider2" ).slider({
         range:false,
         min: 0,
         max: 100,
         value: 100,
         slide: function( event, ui ) {
            var hue = $('#range-slider1').slider('value'),
                sat = ui.value,
                light = $('#range-slider3').slider('value'),
                alpha = $('#range-slider4').slider('value'),
                hsla = "hsla(" + hue + "," + sat + "%, " + light + "%, " + alpha + ")";
            $("#slidevalue").text(hsla);
            $(".slidevalue").css('background-color', hsla);
  
         }
      });
      $( "#range-slider3" ).slider({
         range:false,
         min: 0,
         max: 100,
         value: 50,
         slide: function( event, ui ) {
            var hue = $('#range-slider1').slider('value'),
                sat = $('#range-slider2').slider('value'),
                light = ui.value,
                alpha = $('#range-slider4').slider('value'),
                hsla = "hsla(" + hue + "," + sat + "%, " + light + "%, " + alpha + ")";
            $("#slidevalue").text(hsla);
            $(".slidevalue").css('background-color', hsla);
  
         }
      });
      $( "#range-slider4" ).slider({
         range:false,
         min: 0,
         max: 1,
         value: 1,
         step: 0.01,
         slide: function( event, ui ) {
            var hue = $('#range-slider1').slider('value'),
                sat = $('#range-slider2').slider('value'),
                light =  $('#range-slider3').slider('value'),
                alpha = ui.value,
                hsla = "hsla(" + hue + "," + sat + "%, " + light + "%, " + alpha + ")";
            $("#slidevalue").text(hsla);
            $(".slidevalue").css('background-color', hsla);
  
         }
      });
  });