•  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
r1872 vs r1873
11
2
{{{#!if Subdivision = 10, DotSize = '5px', HandleSize = '20px', SliderSize = '10px'
2
{{{#!if Subdivision = 5, DotSize = '5px', HandleSize = '20px', SliderSize = '10px', SD_HandlePosition = 2
33
}}}{{{#!if Subdivision == 1
44
{{{#!if SD_HitBox01 = 'sd-edge-hitbox'
55
}}}}}}{{{#!if Subdivision == 2
......
2323
}}}}}}{{{#!style
2424
.sd-slider {width:100%;height:@HandleSize@;background:linear-gradient(90deg, #f0f5 calc((@HandleSize@ / 2) - (@SliderSize@ / 2)), transparent 0, transparent calc(100% - ((@HandleSize@ / 2) - (@SliderSize@ / 2))), #f0f5 0), radial-gradient(circle closest-side at calc(@DotSize@ / 2) 50%, #0f0a calc(@DotSize@ / 2), transparent 0)calc((@HandleSize@ / 2) - (@DotSize@ / 2)) 50%/calc((100% / @Subdivision@) - ((@HandleSize@ / 2) / (@Subdivision@ / 2))) 100%, no-repeat linear-gradient(#a00a, #a00a)50% 50%/calc(100% - @HandleSize@) @SliderSize@, no-repeat radial-gradient(circle closest-side, #fff 100%, transparent 0)calc((@HandleSize@ / 2) - (@SliderSize@ / 2)) 50%/@SliderSize@ @SliderSize@, no-repeat radial-gradient(circle closest-side, #fff 100%, transparent 0)calc(100% - ((@HandleSize@ / 2) - (@SliderSize@ / 2))) 50%/@SliderSize@ @SliderSize@, linear-gradient(#00a, #00a)}
2525
26
.sd-handle {width:100%;height:100%;background:no-repeat radial-gradient(circle closest-side, #fffa 100%, transparent 0)0 0/@HandleSize@ @HandleSize@;background-position:50% 0}
26
.sd-handle {width:100%;height:100%;background:no-repeat radial-gradient(circle closest-side, #fffa 100%, transparent 0)0 0/@HandleSize@ @HandleSize@;background-position:0 0}
2727
2828
2929
.sd-hitbox {width:100%;height:100%;border:1px solid red}
3030
31
.sd-handle-position-0 {background-position:calc((100% / @Subdivision@) * 0) 0}
32
.sd-handle-position-1 {background-position:calc((100% / @Subdivision@) * 1) 0}
33
.sd-handle-position-2 {background-position:calc((100% / @Subdivision@) * 2) 0}
34
.sd-handle-position-3 {background-position:calc((100% / @Subdivision@) * 3) 0}
35
.sd-handle-position-4 {background-position:calc((100% / @Subdivision@) * 4) 0}
36
.sd-handle-position-5 {background-position:calc((100% / @Subdivision@) * 5) 0}
37
.sd-handle-position-6 {background-position:calc((100% / @Subdivision@) * 6) 0}
38
.sd-handle-position-7 {background-position:calc((100% / @Subdivision@) * 7) 0}
39
.sd-handle-position-8 {background-position:calc((100% / @Subdivision@) * 8) 0}
40
.sd-handle-position-9 {background-position:calc((100% / @Subdivision@) * 9) 0}
41
.sd-handle-position-10 {background-position:calc((100% / @Subdivision@) * 10) 0}
3142
3243
.sd-edge-next-hitbox {width:70%;background:#0aa5}
3344
.sd-active-hitbox {width:60%;background:#0005}
......
6071
}}}}}}{{{#!if Subdivision >= 9
6172
{{{#!wiki class="sd-hitbox h09 @SD_HitBox09@"
6273
}}}}}}{{{#!if Subdivision >= 10
63
{{{#!wiki class="sd-hitbox h10 sd-edge-hitbox @SD_HitBox10@"
74
{{{#!wiki class="sd-hitbox h10 sd-edge-hitbox @SD_HitBox10@" onclick="add-class,sd-handle,@HandlePosition@"
6475
}}}}}}}}}
6576
}}}}}}
6677
......