Need help with sliders

[Kam1kadze_Off82]

How to make sliders look like this? It is going to be a volume and brightness slider

[balala]

How to make sliders look like this? It is going to be a volume and brightness slider

Question is what don't you know: how to create a slider or how to set the volume and / or brightness?

[Yincognito]

How to make sliders look like this? It is going to be a volume and brightness slider

Well, it's not that complicated (sample for the volume, I'll let balala come up with his own solution for brightness if he wants to):

Code: Select all

[Variables]
SliderX=65

[Rainmeter]
Update=1000
DynamicWindowSize=1
AccurateText=1

---Measures---

[Volume]
Measure=Plugin
Plugin=Win7AudioPlugin

[Value]
Measure=Calc
Formula=0
UpdateDivider=-1

---Meters---

[Slider]
Meter=Shape
Shape=Rectangle 0,0,294,49,3 | StrokeWidth 1 | Stroke Color 28,28,28,255 | Fill Color 37,38,41,255
Shape2=Ellipse 23,23,14 | StrokeWidth 1 | Stroke Color 38,47,60,255 | Fill Color 47,128,222,255
Shape3=Path Speaker | StrokeWidth 0 | Stroke Color 0,0,0,255 | Fill Color 242,242,242,255
Speaker=17,21 | LineTo 20,21 | LineTo 23,17 | LineTo 23,29 | LineTo 20,25 | LineTo 17,25 | SetNoStroke 1 | ClosePath 1
Shape4=Rectangle 65,21,217,5 | StrokeWidth 0 | Stroke Color 16,17,21,255 | Fill LinearGradient ReflectedNoneGradient
ReflectedNoneGradient=90 | 16,17,21,255 ; 0.0 | 228,228,228,255 ; 0.5 | 16,17,21,255 ; 1.0
Shape5=Rectangle 65,21,(#SliderX#-65),5 | StrokeWidth 0 | Stroke Color 16,17,21,255 | Fill LinearGradient ReflectedFullGradient
ReflectedFullGradient=90 | 16,17,21,255 ; 0.0 | 80,157,255,255 ; 0.5 | 16,17,21,255 ; 1.0
Shape6=Ellipse #SliderX#,23,6 | StrokeWidth 1 | Stroke Color 34,31,27,255 | Fill Color 71,132,244,255
;Shape7=Arc 25,21,25,25,2,2,0,0,0,0 | StrokeWidth 1.5 | Stroke Color 242,242,242,255
;Shape8=Arc 25,17,25,29,6,6,0,0,0,0 | StrokeWidth 1.5 | Stroke Color 242,242,242,255
UpdateDivider=-1
LeftMouseUpAction=[!SetVariable SliderX (Clamp($MouseX$,65,(65+217)))][!SetOption Value Formula (((Clamp($MouseX$,65,(65+217)))-65)/217*100)][!UpdateMeasure Value][!CommandMeasure Volume "SetVolume [Value:]"][!UpdateMeter Slider][!Redraw]
MouseScrollUpAction=[!SetVariable SliderX (Clamp(#SliderX#+1,65,(65+217)))][!SetOption Value Formula (((Clamp(#SliderX#+1,65,(65+217)))-65)/217*100)][!UpdateMeasure Value][!CommandMeasure Volume "SetVolume [Value:]"][!UpdateMeter Slider][!Redraw]
MouseScrollDownAction=[!SetVariable SliderX (Clamp(#SliderX#-1,65,(65+217)))][!SetOption Value Formula (((Clamp(#SliderX#-1,65,(65+217)))-65)/217*100)][!UpdateMeasure Value][!CommandMeasure Volume "SetVolume [Value:]"][!UpdateMeter Slider][!Redraw]
DynamicVariables=1

This is just a basic sample, it doesn't (yet) have adjustable parameters in the form of variables in the [Variables] section, so every value is hardcoded. Given the right formulas and additional variables, it can be made adjustable (the size, the amount of change, the colors, etc.) or simplified. It acts on click and scroll on the entire span of the skin, but of course, it can be made to act only on the "slider" itself.

Bottom line, this is just for demonstration purposes, it is not yet refined. Hopefully it will serve as a good base to build on.

[balala]

(sample for the volume, I'll let balala come up with his own solution for brightness if he wants to):

Yep,but I'm still not sure what the question is: how to create the slider or how to set what the slider has to set (volume, brightness or whatever).

[Yincognito]

Yep,but I'm still not sure what the question is: how to create the slider or how to set what the slider has to set (volume, brightness or whatever).

I guess both, right? I mean, a slider by itself, without something to modify, doesn't have much sense, does it? Similarly, only modifying something, without using a slider for that, wouldn't answer the question, correct?

Personally, I think the question was directed more to the visual side of things, but naturally "connecting" the appearance and the behavior of an element is an important part of the whole, so that would probably have been the next question of the OP.

[balala]

I guess both, right? I mean, a slider by itself, without something to modify, doesn't have much sense, does it? Similarly, only modifying something, without using a slider for that, wouldn't answer the question, correct?

Personally, I think the question was directed more to the visual side of things, but naturally "connecting" the appearance and the behavior of an element is an important part of the whole, so that would probably have been the next question of the OP.

Probably, however would be nice if OP would come back with a clarification.

[Yincognito]

This is just a basic sample, it doesn't (yet) have adjustable parameters in the form of variables in the [Variables] section, so every value is hardcoded. Given the right formulas and additional variables, it can be made adjustable (the size, the amount of change, the colors, etc.) or simplified. It acts on click and scroll on the entire span of the skin, but of course, it can be made to act only on the "slider" itself. [...] Bottom line, this is just for demonstration purposes, it is not yet refined. Hopefully it will serve as a good base to build on.

In the meantime, just because I don't like letting things up in the air and not "complete", an adjustable version of more or less the same approach...

Code:

Code: Select all

[Variables]
BGWidth=294
BGHeight=49
BGCornerRadius=4
BGColor=48,48,48,255
StrokeColor=32,32,32,255
StrokeWidth=1
SpeakerSize=12
IconCenterX=23
IconCenterY=23
IconRadius=14
FullColor=80,160,255,255
NoneColor=255,255,255,255
SliderX=65
SliderY=23
SliderW=217
SliderH=12

[Rainmeter]
Update=1000
DynamicWindowSize=1
AccurateText=1

---Measures---

[Volume]
Measure=Plugin
Plugin=Win7AudioPlugin

[Value]
Measure=Calc
Formula=[Volume:]
UpdateDivider=-1
RegExpSubstitute=1
Substitute="\..*$":"","^(.*)$":"\1%","^-1%$":"Mute"
DynamicVariables=1

---Meters---

[Background]
Meter=Shape
Shape=Rectangle 0,0,#BGWidth#,#BGHeight#,#BGCornerRadius# | StrokeWidth #StrokeWidth# | Stroke Color #StrokeColor# | Fill Color #BGColor#
UpdateDivider=-1

[Icon]
Group=SliderGroup
Meter=Shape
Shape=Ellipse #IconCenterX#,#IconCenterY#,#IconRadius# | StrokeWidth #StrokeWidth# | Stroke Color #BGColor# | Fill Color #FullColor#
Shape2=Path Speaker | StrokeWidth 0 | Stroke Color #BGColor# | Fill Color #NoneColor#
Speaker=(#IconCenterX#-#SpeakerSize#/2),(#IconCenterY#-#SpeakerSize#/6) | LineTo (#IconCenterX#-#SpeakerSize#/4),(#IconCenterY#-#SpeakerSize#/6) | LineTo (#IconCenterX#),(#IconCenterY#-#SpeakerSize#/2) | LineTo (#IconCenterX#),(#IconCenterY#+#SpeakerSize#/2) | LineTo (#IconCenterX#-#SpeakerSize#/4),(#IconCenterY#+#SpeakerSize#/6) | LineTo (#IconCenterX#-#SpeakerSize#/2),(#IconCenterY#+#SpeakerSize#/6) | SetNoStroke 1 | ClosePath 1
Shape3=Arc (#IconCenterX#+(Clamp([Volume:],0,100)/100)*#SpeakerSize#/6),(#IconCenterY#-(Clamp([Volume:],0,100)/100)*#SpeakerSize#/12),(#IconCenterX#+(Clamp([Volume:],0,100)/100)*#SpeakerSize#/6),(#IconCenterY#+(Clamp([Volume:],0,100)/100)*#SpeakerSize#/12),((Clamp([Volume:],0,100)/100)*#SpeakerSize#/12),((Clamp([Volume:],0,100)/100)*#SpeakerSize#/12),0,0,0,0 | StrokeWidth (#StrokeWidth#*1.5) | Stroke Color #NoneColor#
Shape4=Arc (#IconCenterX#+(Clamp([Volume:],0,100)/100)*#SpeakerSize#/6),(#IconCenterY#-(Clamp([Volume:],0,100)/100)*#SpeakerSize#/2.4),(#IconCenterX#+(Clamp([Volume:],0,100)/100)*#SpeakerSize#/6),(#IconCenterY#+(Clamp([Volume:],0,100)/100)*#SpeakerSize#/2.4),((Clamp([Volume:],0,100)/100)*#SpeakerSize#/2.4),((Clamp([Volume:],0,100)/100)*#SpeakerSize#/2.4),0,0,0,0 | StrokeWidth (#StrokeWidth#*1.5) | Stroke Color #NoneColor#
UpdateDivider=-1
LeftMouseUpAction=[!CommandMeasure Volume "ToggleMute"][!UpdateMeasure Volume][!SetOption Value Formula [Volume:]][!UpdateMeasure Value][!UpdateMeterGroup SliderGroup][!Redraw]
DynamicVariables=1

[Text]
Group=SliderGroup
Meter=String
X=(#SliderX#+#SliderW#/2)
Y=(#SliderY#+#SliderH#/2+[Text:H]/2)
FontFace=Tahoma
FontColor=#NoneColor#
StringEffect=Shadow
FontEffectColor=0,0,0,255
FontWeight=700
FontSize=10
AntiAlias=1
StringAlign=CenterCenter
MeasureName=Value
Text="%1"
UpdateDivider=-1
DynamicVariables=1

[Slider]
Group=SliderGroup
Meter=Shape
X=(#SliderX#)
Y=(#SliderY#-#SliderH#/2)
Shape=Rectangle 0,0,#SliderW#,#SliderH# | StrokeWidth 0 | Stroke Color #StrokeColor# | Fill Color 0,0,0,1
Shape2=Rectangle (0),(#SliderH#/2-#SliderH#/6),(#SliderW#),(#SliderH#/3) | StrokeWidth 0 | Stroke Color #StrokeColor# | Fill LinearGradient ReflectedNoneGradient
ReflectedNoneGradient=90 | #StrokeColor# ; 0.0 | #NoneColor# ; 0.5 | #StrokeColor# ; 1.0
Shape3=Rectangle (0),(#SliderH#/2-#SliderH#/6),(#SliderW#*[Volume:]/100),(#SliderH#/3) | StrokeWidth 0 | Stroke Color #StrokeColor# | Fill LinearGradient ReflectedFullGradient
ReflectedFullGradient=90 | #StrokeColor# ; 0.0 | #FullColor# ; 0.5 | #StrokeColor# ; 1.0
Shape4=Ellipse (#SliderW#*[Volume:]/100),(#SliderH#/2),(#SliderH#/2) | StrokeWidth #StrokeWidth# | Stroke Color #StrokeColor# | Fill Color #FullColor#
UpdateDivider=-1
LeftMouseUpAction=[!SetOption Value Formula ($MouseX$*100/[Slider:W])][!UpdateMeasure Value][!CommandMeasure Volume "SetVolume [Value:]"][!UpdateMeasure Volume][!UpdateMeterGroup SliderGroup][!Redraw]
MouseScrollUpAction=[!SetOption Value Formula (Clamp(([Value:]+1),0,100))][!UpdateMeasure Value][!CommandMeasure Volume "SetVolume [Value:]"][!UpdateMeasure Volume][!UpdateMeterGroup SliderGroup][!Redraw]
MouseScrollDownAction=[!SetOption Value Formula (Clamp(([Value:]-1),0,100))][!UpdateMeasure Value][!CommandMeasure Volume "SetVolume [Value:]"][!UpdateMeasure Volume][!UpdateMeterGroup SliderGroup][!Redraw]
DynamicVariables=1

Preview:

ezgif.com-gif-maker.gif

The size, position, ec. can be adjusted from the variables in the [Variables] section. Left clicks and mouse scroll control the slider.

[balala]

On the other hand a "real" slider requires it to be draggable, but for this we need a plugin. For instance the Mouse plugin, developed a while ago by NighthawkSLO. In jsmorley's post you can find a perfectly working skin to set the volume, either by clicking or by dragging the slider, just take care to have the Mouse plugin installed. If it's not, just download jsmorley's MouseVolume_1.0.rmskin skin installer from the above link, install the skin and by this, you get the appropriate version of the plugin installed, which you can use from now on.