Transparent background support for "range" and "min-range" slider types

[soundar24]

Currently the "default" slider only supports the transparent background. But for "range" and "min-range" slider also should support the transparent background.

Requested by "Janeth Chavez" and "Καρυοφύλλης Π." on here:
http://roundsliderui.com/#comment-2396327317
http://roundsliderui.com/#comment-2324959673

[soundar24]

The current slider constructs with the multiple parts of "div" elements, so here we can't achieve this. For this case we need to use additional svg element to achieve this.

By this concept i created an sample demos for min-range slider with transparent background. So this behavior should be included in the source to support all slider types.

http://jsfiddle.net/soundar24/LpuLe9tr/359/
http://jsfiddle.net/soundar24/LpuLe9tr/203/

[zipper]

Sadly, these workarounds doesn't work in IE11 and older, neither in Microsoft Edge in latest version :(

[soundar24]

Yes, unfortunately IE doesn't support the CSS3 transform styles on SVG elements.. I will check any alternate way to handle this and update you...

[soundar24]

Updated the generic demo which supports all slider types and browsers (including IE and Edge):

https://jsfiddle.net/soundar24/1usqdvc9/5/

[figureout77]

Hi soudar, I have a problem with roundSlider transparent background. I added a png as background to .rs-path-color class. The params I sent is

$('#backseat_slider').roundSlider({
            sliderType: "min-range",
            circleShape: "custom-half",
            startAngle: -20,
            endAngle: "+160",
            value: 70,
            showTooltip: false
})

when I slide the bar, the background image came out of the area.
Cannot wait to receive your answer, and very appreciate it^ ^

[soundar24]

@Wannaof Can you let me know, for what purpose you are using the image as background. If, just you want to show the path color then you can use a solid color.

I have modified the demo similar to your requirement, by differentiate the path color through the color value:

https://jsfiddle.net/soundar24/1usqdvc9/16/

If you want to set the image as background, then you may need to use the image url for stroke instead of a solid color.

[figureout77]

First of all, thank your for your answer, I really apppreciate it.
I posted same question on stackoverflow, here is the the url of img https://i.stack.imgur.com/8jRbA.png
I want to realize the boder radius and gradient, then I choose the background image.
Thanks for your demo, I will try your solution way haha~
Any way thx⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄

[figureout77]

@soundar24 I tried the round slider several days ago, and the way I tried to solve my problem, what I asked you, is to add a mask to the block3, then made a fixed width and height, gave overflow:hidden attribute. Everthing works fine when the circular is 0 degree(horizontal). But when I gave a startAngle, it's out of control. The rotate center is wrong, so when I slide the path background image, some part of it goes somewhere unknown...I don't know why the center changes - -.. After then, I tried add tramsform:rotate() to the div#slider's parent. Problem comes again, when I click the circle area, it didn't response!

[figureout77]

@soundar24 I used the demo(https://jsfiddle.net/soundar24/1usqdvc9/16/) and realized my round slide, but I found the class .path-bg of first circle and .range-bg of second circle didn't add. I just copied code from jsfiddle, and roundslider version is latest. It makes me feel confused. Though I used first-child and last-child to select circle and give color, and I use
#legrest_rotate_slider .rs-start .rs-border{
...
border-bottom-left-radius: 200px;
border-bottom-right-radius: 200px;
}
#legrest_rotate_slider .rs-end .rs-border {
...
border-top-left-radius: 200px;
border-top-right-radius: 200px;
}
which realized my border radius haha~

[soundar24]

@Wannaof I am little bit confused with your requirement. From the final update of yours, I hope the roundSlider was working now. If still you are facing any issue then can you update me the exact issue.

Also you can share me your demo link which you shown in the screen shot, and can explain through it. Otherwise simply you can prepare a video to show your issue.

[figureout77]

@soundar24 Thanks for your reply, roundSlider is working now.
The requirement is I need to slide circle dot in the circular shape, when I slide it, the color changes, and the blue part of chair needs to rotate the same angle.
The question last night I posted is I copied your demo code from jsFiddle, but I found it didn't show two different colors. There is no .range-bg, .path-bg class in circle. I don't know why, that confused me.

[zsarnett]

Any update on if this will become available? Or if another way is in the works?

[soundar24]

@zsarnett, actually this will be consider for the next major version only since this will cause the architecture change.. If you need to use the transparent background then you can use the workaround (extended code) in your application, however the similar functionality only move into the source in future.

https://jsfiddle.net/soundar24/1usqdvc9/5/

Please check and let me know whether is this feasible to achieve your requirement? Or let me know if facing any difficulties.

[zsarnett]

@soundar24 Sounds good. Ill try this out since this is the solution. (I was making sure this was still the best solution for this issue) Do we know an approximate on the next release?

[soundar24]

@zsarnett, actually this is the major changes and planned in the version 2.0 only.. but in between I have planned some minor version releases also..

due to the time constraints I can't continuously work on this, however based on the user's requirement I provided the solution ASAP.. below is the current plan,
https://waffle.io/soundar24/roundSlider

so, I don't have the exact timeline. While using, if you are faced any issues or need any improvement then you can let me know, we can prioritize that soon..

[soundar24]

roundSlider version 1.4.0 was released which supports the SVG mode, where the mentioned problem was resolved. Also the transparent background is working as expected, check the below demo:

https://jsfiddle.net/soundar24/n8wd79mb/