Customize +/- slider

[Mirco]

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
}

[admin]

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.

[Erwin van der Zwart]

Hi,

Look at this forum item, there is a sample made by admin how to tweak your slider.

http://forum.logicmachine.net/showthread...ght=slider

BR,

Erwin

[Mirco]

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

[admin]

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');

[Mirco]

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.

[matschi]

Hi,
is there any chance to create a slider in a vertical direction?

[admin]

Vertical slider is already there, you have to select it in visualization parameters.

[Trond Hoyem]

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?

[admin]

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;
}

[Trond Hoyem]

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;
}

Basically, what I need is some pointer so how to set up the different parameters.

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.

[admin]

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.

[Trond Hoyem]

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?

[admin]

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;
}

[Trond Hoyem]

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, great.

Will try that.

---

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!

[Trond Hoyem]

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, so I have been able to make some modifications to the slider, and it is now looking the way I want it.

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;
}

[admin]

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;
}

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.

[Trond Hoyem]

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;
}

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.

Yep. that did the trick!