要实现不使用JS的动态多方向滑块，可以使用CSS的动画和伪元素来实现。下面是一个使用SCSS/SASS的代码示例：

HTML:

SCSS/SASS:

// 设置滑块的大小和颜色
$thumb-size: 20px;
$thumb-color: #ff0000;

.slider {
  position: relative;
  width: 300px;
  height: $thumb-size;
  margin: 50px auto;
}

.slider-range {
  width: 100%;
  height: 100%;
  background-color: #ccc;
  -webkit-appearance: none; // 去除默认样式
  appearance: none;
  outline: none;
  padding: 0;
  margin: 0;

  // 设置滑块的轨道样式
  &::-webkit-slider-runnable-track {
    height: $thumb-size;
    background-color: #ccc;
  }

  // 设置滑块的滑块样式
  &::-webkit-slider-thumb {
    -webkit-appearance: none; // 去除默认样式
    appearance: none;
    width: $thumb-size;
    height: $thumb-size;
    background-color: $thumb-color;
    position: relative;
    z-index: 2;
  }

  // 设置滑块的伪元素样式
  &::-moz-range-thumb {
    width: $thumb-size;
    height: $thumb-size;
    background-color: $thumb-color;
    position: relative;
    z-index: 2;
  }
}

.slider-thumb {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%); // 滑块居中
  width: $thumb-size;
  height: $thumb-size;
  background-color: $thumb-color;
  z-index: 1;
  transition: left 0.2s; // 滑块滑动过渡效果

  &::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #ccc;
    z-index: -1;
  }
}

.slider-range::-webkit-slider-thumb:hover + .slider-thumb {
  left: calc(100% + #{$thumb-size / 2}); // 当滑块hover时，滑块移动到滑块轨道右侧
}

.slider-range::-webkit-slider-thumb:active + .slider-thumb {
  left: 0; // 当滑块按下时，滑块移动到滑块轨道左侧
}

这个代码示例使用了CSS的伪元素和过渡效果来实现滑块的动态效果。当滑块被hover时，滑块会移动到滑块轨道的右侧；当滑块被按下时，滑块会移动到滑块轨道的左侧。