Alter CSS for smaller pointers

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;

[ValentinH]

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