라운드 슬라이더 배경이 투명하지 않습니다.

플랫폼에 대한 설문지를 작성 중입니다. 우리는 jQuery 플러그인을 사용하여 둥근 슬라이더를 만들고 싶습니다. 한 가지 문제가 있습니다. 이 슬라이더가 지금 모습입니다 :라운드 슬라이더 배경이 투명하지 않습니다.

는 내가 원하는 것은 당신이 그라데이션 배경을 볼 수 있도록 흰색 원이, 투명 슬라이더입니다. 하지만 .. 최대한 빨리이 흰색 원을 분리 할 때,이 얻을 : 내가 사용

JQuery와 플러그인은 roundsliderui라고합니다. 이 플러그인을 사용하여이 문제를 해결할 수있는 방법이 있습니까? 아니면 이것이 표준 가능성이있는 플러그인이 있습니까? 나는 한동안 주변을 둘러 보았지만 올바른 대답을 찾을 수 없었다. 나는 바닐라 전체를 코딩 할 시간이별로 없다. (here에서 촬영) 당신이 요구하는 내용의 예는이

출처

2017-10-14 Rachel Romée

var fn1 = $.fn.roundSlider.prototype._setProperties; 
 
$.fn.roundSlider.prototype._setProperties = function() { 
 
    fn1.apply(this); 
 
    var o = this.options, r = o.radius, d = r * 2, 
 
     r1 = r - (o.width/2) - this._border(true), 
 
     svgNS = "http://www.w3.org/2000/svg"; 
 
    this._circum = Math.PI * (r1 * 2); 
 

 
    var $svg = $(document.createElementNS(svgNS, "svg")); 
 
    $svg.attr({ "height": d, "width": d }); 
 

 
    this.$circle = $(document.createElementNS(svgNS, 'circle')).attr({ 
 
    "fill": "transparent", "class": "rs-transition", "cx": r, "cy": r, "r": r1, 
 
    "stroke-width": o.width, "stroke-dasharray": this._circum 
 
    }).appendTo($svg); 
 

 
    this.$svg_box = $(document.createElement("div")).addClass("rs-transition rs-svg").append($svg).css({ 
 
    "height": d, "width": d, "transform-origin": "50% 50%", 
 
    "transform": "rotate(" + (o.startAngle + 180) + "deg)" 
 
    }).appendTo(this.innerContainer); 
 
} 
 

 
var fn2 = $.fn.roundSlider.prototype._changeSliderValue; 
 
$.fn.roundSlider.prototype._changeSliderValue = function (val, deg) { 
 
    fn2.apply(this, arguments); 
 
    deg = deg - this.options.startAngle; 
 

 
    if (this._rangeSlider) { 
 
    this.$svg_box.rsRotate(this._handle1.angle + 180); 
 
    deg = this._handle2.angle - this._handle1.angle; 
 
    } 
 
    var pct = (1 - (deg/360)) * this._circum; 
 
    this.$circle.css({ strokeDashoffset: pct }); 
 
} 
 
/// ### ---- ### --------------------- ### ---- ### /// 
 

 

 
$("#slider").roundSlider({ 
 
    width: 35, 
 
    radius: 115, 
 
    sliderType: "range", 
 
    value: "20,70", 
 
    startAngle: 90 
 
})

body { 
 
    background-color: #ccc; 
 

 
    background-size: 100%; 
 
    background-repeat: no-repeat; 
 
} 
 
.rs-control .rs-range-color, 
 
.rs-control .rs-path-color, 
 
.rs-control .rs-bg-color { 
 
    background-color: transparent; 
 
} 
 
.rs-control circle { 
 
    /* mention the range color here */ 
 
    stroke: #02b4ff; 
 
} 
 
.rs-border, .rs-handle { 
 
    border: 2px solid white; 
 
} 
 
.rs-handle{ 
 
    
 
} 
 
.rs-tooltip-text{ 
 
    font-size: 22px; 
 
    font-weight: bold; 
 
    color: #ff0202; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdn.jsdelivr.net/jquery.roundslider/1.3/roundslider.min.js"></script> 
 
<link href="https://cdn.jsdelivr.net/jquery.roundslider/1.3/roundslider.min.css" rel="stylesheet" /> 
 

 
<div id="root"> 
 
    <div id="slider"></div> 
 
</div>

출처

2017-10-14 17:58:29

라운드 슬라이더 배경이 투명하지 않습니다.

답변

관련 문제