+- Logic Machine Forum (https://forum.logicmachine.net)
+-- Forum: LogicMachine eco-system (https://forum.logicmachine.net/forumdisplay.php?fid=1)
+--- Forum: Visualization (https://forum.logicmachine.net/forumdisplay.php?fid=9)
+--- Thread: Customize +/- slider (/showthread.php?tid=516)
Customize +/- slider - Mirco - 16.12.2016
Hi,
I have a "+/- slider" and I have enable the "show control" option. Can I change the dimension of the slider?
I tryed to use this CSS code, but doesn't work
Code:
.setpointW {
width: 140px;
height: 30px
}RE: Customize +/- slider - admin - 16.12.2016
Do you mean slider or spinner? Either way both consist of several elements which all must be sized if you want to change both width and height.
RE: Customize +/- slider - Erwin van der Zwart - 16.12.2016
Hi,
Look at this forum item, there is a sample made by admin how to tweak your slider.
http://forum.logicmachine.net/showthread.php?tid=467&highlight=slider
BR,
Erwin
RE: Customize +/- slider - Mirco - 19.12.2016
After some test in the HTML Editor of the browser I found that it is a spinner and I found some parameters that I have to change for my purpose!
Thank you Erwin, I saw the thread and I tryed that code but didn't work.
I have 2 question:
1) Is there a way to display always 1 decimal though the decimal is zero? (now: 10 after: 10,0)
2) And is there a way to display the dot instead of comma? (now: 10,5 after: 10.5)
Thank you for your help!
PS: I attach my current spinner
RE: Customize +/- slider - admin - 19.12.2016
Since it uses number input, it's purely up to browser how to display the value. Value is always formatted with a fixed number of decimals set in object's visualization parameters. You can try adding this to custom JavaScript, but I'm not sure if it will work:
Code:
$('.spinner-value').attr('type', 'text');RE: Customize +/- slider - Mirco - 19.12.2016
It works really well!!
Thank you!I only have to change the id from .input[type="number"] to .input[type="text"] in my CSS code.
I attach the result.
RE: Customize +/- slider - matschi - 22.12.2016
Hi,
is there any chance to create a slider in a vertical direction?
RE: Customize +/- slider - admin - 23.12.2016
Vertical slider is already there, you have to select it in visualization parameters.
RE: Customize +/- slider - Trond Hoyem - 23.03.2020
Hi
I am not so good at CSS.
I want to modify the spinner in kind of the same way as Mirco here. I need some other coulours and such, but I basically want to change the same things. I have inspected the spinner in the browser, and can see lots of parameters there, but I am not sure how to start the CSS code for the changes.
Anyone want to point me in the right direction here?
RE: Customize +/- slider - admin - 23.03.2020
Depends on what do you want to change exactly. This example will change spinner button color to orange:
Code:
.control-spinner .btn {
background-color: #f90;
background-image: none;
}RE: Customize +/- slider - Trond Hoyem - 23.03.2020
(23.03.2020, 07:25)admin Wrote: Depends on what do you want to change exactly. This example will change spinner button color to orange:Basically, what I need is some pointer so how to set up the different parameters.
Code:.control-spinner .btn {
background-color: #f90;
background-image: none;
}
If I in addition to having orange button, I want to change the border colour of the value filed, how can I add that? Is there somewhere a tutorial or something explaining how to figure this out?
I see from the inspection that there are several parameters, and I have tried to enter some of them, but to no effect.
RE: Customize +/- slider - admin - 23.03.2020
Border color can be changed like this:
Code:
.control-spinner .btn {
background-color: #f90;
background-image: none;
border-color: #f0f;
}
.control-spinner input {
border-color: #f0f;
}The whole visualization is just HTML/CSS/JS. Any tutorial on basic web front-end development can be applied here.
RE: Customize +/- slider - Trond Hoyem - 23.03.2020
(23.03.2020, 07:39)admin Wrote: Border color can be changed like this:
Code:.control-spinner .btn {
background-color: #f90;
background-image: none;
border-color: #f0f;
}
.control-spinner input {
border-color: #f0f;
}
The whole visualization is just HTML/CSS/JS. Any tutorial on basic web front-end development can be applied here.
I have tried to add some adjustments of corner radius to the code you provided.
.control-spinner .btn {
background-color: #f90;
background-image: none;
border-color: #000;
border-bottom-right-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: 0;
border-top-left-radius: 0;
}
The parameters for the radius is then striked thru in the inspector. Any idea why that is?
RE: Customize +/- slider - admin - 23.03.2020
This means that there's some other CSS rule with higher priority that over-rides your rule.
You can use !important rule to fix this:
Code:
.control-spinner .btn {
background-color: #f90;
background-image: none;
border-color: #000;
border-radius: 0 !important;
}RE: Customize +/- slider - Trond Hoyem - 23.03.2020
(23.03.2020, 08:01)admin Wrote: This means that there's some other CSS rule with higher priority that over-rides your rule.OK, great.
You can use !important rule to fix this:
Code:.control-spinner .btn {
background-color: #f90;
background-image: none;
border-color: #000;
border-radius: 0 !important;
}
Will try that.
(23.03.2020, 08:01)admin Wrote: This means that there's some other CSS rule with higher priority that over-rides your rule.
You can use !important rule to fix this:
Code:.control-spinner .btn {
background-color: #f90;
background-image: none;
border-color: #000;
border-radius: 0 !important;
}
OK, seems I am getting the hang of this. Thanks for help!
RE: Customize +/- slider - Trond Hoyem - 23.03.2020
(23.03.2020, 08:01)admin Wrote: This means that there's some other CSS rule with higher priority that over-rides your rule.OK, so I have been able to make some modifications to the slider, and it is now looking the way I want it.
You can use !important rule to fix this:
Code:.control-spinner .btn {
background-color: #f90;
background-image: none;
border-color: #000;
border-radius: 0 !important;
}
But there is a prblem; When I drag the handle from top to bottom, it stops at about 20%. If I then click on the slider below the handle, it moves to that positopn. I am also able to drag the handle to above the slider by a few pixels.
I have tried to play around with the parameters, but I am stuck at the same behavior. Any idea where I have something wrong?
The CSS code I have now is:
Code:
.usermode .slider-alt .slider-v .slider,
.slider-alt .slider-v .slider .progress {
height: 350px;
width: 5px;
padding: 30px;
}
.slider-alt .slider-v .slider .progress {
position: static;
padding: 0;
color: #f00;
border-color: #000;
border-radius:0 !important;
}
.slider-alt .slider-v .slider {
padding: 0 13px;
}
.slider-alt .slider-v .btn {
left: 0px;
border-radius: 0 !important;
width: 61px !important;
background-color: rgb(228, 228, 228) !important;
border-color: #000;
height: 22px;
}
.slider-alt .slider-v .slider .slider-handle:before {
width: 4px;
top: 27px !important;
left: 9px;
height: 300px;
color: #f00;
}
.slider-alt .slider-max {
Display: none;
}
.slider-alt .slider-min {
Display: none;
}RE: Customize +/- slider - admin - 23.03.2020
This should do the trick:
Code:
.usermode .slider-alt .slider-v .slider,
.slider-alt .slider-v .slider .progress {
height: 350px;
width: 5px;
padding: 0 30px;
}RE: Customize +/- slider - Trond Hoyem - 23.03.2020
(23.03.2020, 15:21)admin Wrote: This should do the trick:Yep. that did the trick!
It removes empty space from top/bottom where min/max buttons are usually placed. But since you have hidden them this space should be removed.Code:.usermode .slider-alt .slider-v .slider,
.slider-alt .slider-v .slider .progress {
height: 350px;
width: 5px;
padding: 0 30px;
}