Issue with labels beyond the slidebar

[avxkim]

As you can see, edges goes beyond the progress bar... How to set labels to not leave progress bar width:

How to accomplish this?

If i play with translate - i can achieve that, but slider-dot won't be centered correctly then, there's hardcoded values in a script itself.

[biigpongsatorn]

@heihachi88 This component will fix label position to middle of pointer, now you can't custom this by programatic. But you can play with translate like this.

<vue-slide-bar
  id="slide-bar-time-rang"
  v-model="slider.value"
  :data="slider.data"
  :range="slider.range"
  :processStyle="{ backgroundColor: '#d8d8d8' }"
  @callbackRange="callbackRange">
  <template slot="tooltip" slot-scope="tooltip">
    <img src="static/images/rectangle-slider.svg">
  </template>
</vue-slide-bar>

<style>
#slide-bar-time-rang .vue-slide-bar-separate:first-child span {
  transform: translate(0, 0) !important;
}
#slide-bar-time-rang .vue-slide-bar-separate:last-child span {
  transform: translate(-100%, 0) !important;
}
</style>

[biigpongsatorn]

[avxkim]

Try to move that dot to 15 mins position, how it would look?

[biigpongsatorn]

@heihachi88 You want to move this dot right ? (')

or this ?

[biigpongsatorn]

[avxkim]

That's the problem, it should be centered like this:

Same on the right side. I removed these ' dots at all, as you can see on my first screenshot.

[biigpongsatorn]

@heihachi88 Sorry, now you can't align pointer like this.

[avxkim]

Damn :( everything is ok, except this pointer, any workarounds maybe? Can i prolong that slidebar for the empty space on the sides?

Or even use js to manually add more translate value when the slider dot is on the first or the last position?

[biigpongsatorn]

@heihachi88 Actually you can hack by create fake line left and right side on bar like this.

and

You can see example code here. https://jsfiddle.net/fL53ksz2/

[avxkim]

Thank, would try it out. Also i cloned your repo and couldn’t understand the math to move the dot, how do you calculate on how much pixels to move on press? Does it depends on the size of dot slider?

On September 6, 2018 at 17:22:04, Pongsatorn (notifications@github.com) wrote:

@heihachi88 https://github.com/heihachi88 Actually you can hack by create fake line left and right side on bar like this.

[image: image] https://user-images.githubusercontent.com/10693658/45154379-a2275c00-b201-11e8-9ff4-6c94ba65afb4.png

and

[image: image] https://user-images.githubusercontent.com/10693658/45154399-afdce180-b201-11e8-8809-7dae3dfa5fe7.png

You can see example code here. https://jsfiddle.net/fL53ksz2/

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/biigpongsatorn/vue-slide-bar/issues/11#issuecomment-419058611, or mute the thread https://github.com/notifications/unsubscribe-auth/AFeSt51BqeEMe8aJ-evgAkniVbqPUQVdks5uYQVcgaJpZM4WcQxv .

[avxkim]

Your fiddle is empty, btw. Also if i have different color, lets say "blue", when you move to the right.

[biigpongsatorn]

@heihachi88 You can set background-color of class .fake-line-right when your v-model = 2hrs.

This JSFiddle is just example code.