Progress for single range

[MrPoliteGrizlyM]

Hey! Can I fill progress just with one slider like here:

[soanvig]

What do you mean by "progress"?

[MrPoliteGrizlyM]

I mean this thing:

[MrPoliteGrizlyM]

What do you mean by "progress"?

I mean this thing: So, jsr will have bar, if there is more than 1 slider.

[soanvig]

Hm... currently it is not possible, I believe. You could perhaps do some CSS things to hide one slider, disable pointer events on bar and so on.

You can create two sliders, set one to zero, and disable (via CSS) clicks on bar and rail. Then, there will be no possibility to set value of first slider, and it will be hidden via CSS too. If you need help I may help you.

This would be perfectly possible in v2 though, which is coming live soon, so stay in touch.

[MrPoliteGrizlyM]

Hm... currently it is not possible, I believe. You could perhaps do some CSS things to hide one slider, disable pointer events on bar and so on.

You can create two sliders, set one to zero, and disable (via CSS) clicks on bar and rail. Then, there will be no possibility to set value of first slider, and it will be hidden via CSS too. If you need help I may help you.

This would be perfectly possible in v2 though, which is coming live soon, so stay in touch.

Okey, thank you. Can you show me your code how to implement such hack way implementation of this feature?

[soanvig]

Gonna look at that soon

[MrPoliteGrizlyM]

Gonna look at that soon

I've tried to do that via css, everything works perfect, except bar. If you click on bar close to disabled slider, it's changing: How can I disable that?

There is my scss code:

  .jsr_rail {
    background: #ccc;
    height: 10px;
    border-radius: 5px;
    .jsr_bar {
      pointer-events: none;
      cursor: none;
      height: 10px;
      border-top-left-radius: 5px;
      border-bottom-left-radius: 5px;
      background-color: rgb(33,178,101) !important;
    }
    .jsr_slider[data-jsr-id='0'] {
      pointer-events: none;
      display: none;
    }
    .jsr_label[data-jsr-id='0'] {
      display: none;
    }
    .jsr_slider[data-jsr-id='1'] {
      cursor: pointer;
    }
  }

JS code:

const range = new JSR(['#amountSlider', '#amountSliderExternal'], {
    sliders: 2,
    step: 5000,
    min: 5000,
    max: 300000,
    values: [5000, 50000],
    limit: {
        show: true
    },
    labels: {
        minMax: false,
        formatter: (value) => {
            return currency(value, { separator: ' ', precision: 0 }).format().toString();
        }
    },
    grid: false
});

[soanvig]

Yeah, that's the problem I've ecountered too :-) You may try make it a little bit hacky:

const min = 5000
const firstSlider = document.querySelector('#amountSlider');
range.addEventListener('update', (input, value) => {
    if (input === firstSlider && value !== min) {
       range.setValue(0, min);
    }
});

Not sure if that will work, but now any update on first slider will immediately set it on minimum value. Hacky as hell :)

[MrPoliteGrizlyM]

Yeah, that's the problem I've ecountered too :-) You may try make it a little bit hacky:

const min = 5000
const firstSlider = document.querySelector('#amountSlider');
range.addEventListener('update', (input, value) => {
    if (input === firstSlider && value !== min) {
       range.setValue(0, min);
    }
});

Not sure if that will work, but now any update on first slider will immediately set it on minimum value. Hacky as hell :)

Thank you very match! That helped. Waiting for v2.0 of your jsr slider ! :)

[soanvig]

This is easily achievable with custom module in v2, and that module would be super simple (initView would create element with left: 0, and render would update the right position)