Alter CSS for smaller pointers

[hancock808]

Great directive. I love it, but need it to be a little smaller.

I modified the CSS (basically divided all of this in half) to achieve smaller pointers...

rzslider .rz-pointer { width: 16px;height: 16px;border-radius: 8px; top: -7px }
rzslider .rz-pointer:after { top: 6px;left: 6px;width: 4px;height: 4px; border-radius: 2px }

... but they do not align with the tick marks. Any tips to acheive that alignment?

[ValentinH]

Yes also the ticks are not correctly positioned. The easiest way to tweak the style is to modify the less variables and regenerate the css file.

Here's the correct generated file with the value you mentioned:

rzslider {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 4px;
  margin: 35px 0 15px 0;
  vertical-align: middle;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

rzslider[disabled] {
  cursor: not-allowed;
}

rzslider[disabled] .rz-pointer {
  cursor: not-allowed;
  background-color: #d8e0f3;
}

rzslider span {
  position: absolute;
  display: inline-block;
  white-space: nowrap;
}

rzslider .rz-base {
  width: 100%;
  height: 100%;
  padding: 0;
}

rzslider .rz-bar-wrapper {
  left: 0;
  z-index: 1;
  width: 100%;
  height: 16px;
  padding-top: 8px;
  margin-top: -8px;
  box-sizing: border-box;
}

rzslider .rz-bar-wrapper.rz-draggable {
  cursor: move;
}

rzslider .rz-bar {
  left: 0;
  z-index: 1;
  width: 100%;
  height: 4px;
  background: #d8e0f3;
  -webkit-border-radius: 2px;
     -moz-border-radius: 2px;
          border-radius: 2px;
}

rzslider .rz-bar.rz-selection {
  z-index: 2;
  background: #0db9f0;
  -webkit-border-radius: 2px;
     -moz-border-radius: 2px;
          border-radius: 2px;
}

rzslider .rz-pointer {
  top: -6px;
  z-index: 3;
  width: 16px;
  height: 16px;
  cursor: pointer;
  background-color: #0db9f0;
  -webkit-border-radius: 8px;
     -moz-border-radius: 8px;
          border-radius: 8px;
}

rzslider .rz-pointer:after {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 4px;
  height: 4px;
  background: #ffffff;
  -webkit-border-radius: 2px;
     -moz-border-radius: 2px;
          border-radius: 2px;
  content: '';
}

rzslider .rz-pointer:hover:after {
  background-color: #ffffff;
}

rzslider .rz-pointer.rz-active {
  z-index: 4;
}

rzslider .rz-pointer.rz-active:after {
  background-color: #451aff;
}

rzslider .rz-bubble {
  bottom: 8px;
  padding: 1px 3px;
  color: #55637d;
  cursor: default;
}

rzslider .rz-bubble.rz-selection {
  top: 8px;
}

rzslider .rz-bubble.rz-limit {
  color: #55637d;
}

rzslider .rz-ticks {
  position: absolute;
  top: -3px;
  left: 0;
  z-index: 1;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 0;
  padding: 0 3px;
  margin: 0;
  list-style: none;
  box-sizing: border-box;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

rzslider .rz-ticks .tick {
  width: 10px;
  height: 10px;
  text-align: center;
  cursor: pointer;
  background: #d8e0f3;
  border-radius: 50%;
}

rzslider .rz-ticks .tick.selected {
  background: #0db9f0;
}

rzslider .rz-ticks .tick .tick-value {
  position: absolute;
  top: -20px;
  transform: translate(-50%, 0);
}

rzslider.vertical {
  position: relative;
  width: 4px;
  height: 100%;
  padding: 0;
  margin: 0 20px;
  vertical-align: baseline;
}

rzslider.vertical .rz-base {
  width: 100%;
  height: 100%;
  padding: 0;
}

rzslider.vertical .rz-bar-wrapper {
  top: auto;
  left: 0;
  width: 16px;
  height: 100%;
  padding: 0 0 0 8px;
  margin: 0 0 0 -8px;
}

rzslider.vertical .rz-bar {
  bottom: 0;
  left: auto;
  width: 4px;
  height: 100%;
}

rzslider.vertical .rz-pointer {
  top: auto;
  bottom: 0;
  left: -6px !important;
}

rzslider.vertical .rz-bubble {
  bottom: 0;
  left: 8px !important;
  margin-left: 3px;
}

rzslider.vertical .rz-bubble.rz-selection {
  top: auto;
  left: 8px !important;
}

rzslider.vertical .rz-ticks {
  top: 0;
  left: -3px;
  z-index: 1;
  width: 0;
  height: 100%;
  padding: 3px 0;
  -webkit-flex-direction: column-reverse;
      -ms-flex-direction: column-reverse;
          flex-direction: column-reverse;
}

rzslider.vertical .rz-ticks .tick {
  vertical-align: middle;
}

rzslider.vertical .rz-ticks .tick .tick-value {
  top: auto;
  right: -20px;
  transform: translate(0, -28%);
}

To achieve this, I only had to modify the following variables:

@ticksValuePosition: -20px;
@handleSize: 16px;
@handlePointerSize: 4px;

[guikubivan]

It would also be nice to control width & height of pointer separately, but maybe that's asking too much ;)

[ValentinH]

This is definitely possible, you just need to tweak the css: I'm using rectangular shaped pointers at work ;)

[edu2004eu]

I think this should be re-opened as a feature, because sometimes it's not enough to change the less variables and recompile, because there could be use-cases where we need 2 or more separate sizes on the same page.

[ValentinH]

Again you just need to set custom CSS rule for a specific slider if you need...

[Sadi-1992]

i dont understand how to set the custom css rule...

is it possible to set this per JavaScript like document.getElementsByClassName.... ?

[ValentinH]

Here is a good example of what can be achieved with custom CSS: http://jsfiddle.net/8ebm5nh2/ . For the needs of the demo, I overwrite the rule for an external CSS file but the best/recommended way to do it is to modify the variables.less or rzslider.less files and regenerate the css for the slider.

[miguelleitevieira]

I used the custom css above, but the circle not cover the tick.
And we don't have the bar space on right like the left side.

[ValentinH]

You are probably missing a padding on the main bar

[miguelleitevieira]

@ValentinH I copied your css above, but let me check this.

[ValentinH]

You can also check the demo page. There a totally custom style for one of the example.