1

I'm using a Vue implementation of Material: https://stasson.github.io/vue-mdc-adapter/#/

The problem I'm having is on page load. When I view my slider, the bar fills correctly based on saved values but the knob that you can use to change the slider value stays at 0. However, whenever I resize the window or open and close dev tools, the knob adjusts to its correct position.

Here is what it looks like on page load: enter image description here

Code:

  <mdc-slider
    v-model="value"
    min="0"
    max="120"      
    step="5"
    unit="mins"
  />

Does anyone have a solution to have the knob load correctly on page load?

RogerFedFan
  • 548
  • 1
  • 8
  • 34

1 Answers1

1

I'm not sure what your Vue object looks like, but this is working for me..

Edit #2: it looks like this is 'common'.. Also, you need to make sure you have all of the correct css files loaded, etc.. It would be extremely helpful if you could provide some code that reproduces this issue, or elaborate more on your config.. Are you doing anything special with css, etc..?

Edit #2.1: you could try either of the following examples, based upon their documentation and the layout-on property.. (this is a stab in the dark - I'm not sure if either of these examples will work..)

 // Example 1:
 <mdc-slider
    v-model="value"
    min=0   
    max=120      
    step=5 
    layout-on   // ADDED: you could try using an empty prop
    unit="mins" // not sure what this is doing?
  />

 // Example 2:
 <mdc-slider
    v-model="value"
    min=0   
    max=120      
    step=5 
    layout-on="change" // ADDED: or pass in the 'change' event
    unit="mins"        // not sure what this is doing?
  />

From the documentation:

(*) By default, the slider component tracks window resize and drawer open/close events in order to reset it's layout, but it in case off css resize or positioning change, the layout may be off. in this case you can use the layout-on event to force a layout, or call the layout() method programatically.

CodePen mirror

Edit: I bet it's because you are passing in String's and not Number's in the max, min, and step, properties.. You can read more in their documentation here. Or you may not have the proper css loaded?

Try something like this:

 <mdc-slider
    v-model="value"
    min=0    // or :min="0"
    max=120  // or :max="120"      
    step=5   // or :step="5"
    unit="mins"
  />

enter image description here

new Vue({
  el: "#app",
  data: {
    max1: 120,
    max2: 200,
    value1: 120,
    value2: 80,
  }
})
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" type="text/css">
<link rel="stylesheet" href="https://unpkg.com/vue-mdc-adapter@^0.6.0/dist/vue-mdc-adapter.min.css" type="text/css">
<script src="https://unpkg.com/vue@^2.5.9/dist/vue.min.js"></script>
<script src="https://unpkg.com/vue-mdc-adapter@^0.6.0/dist/vue-mdc-adapter.min.js"></script>

<div id="app">
  <div>
    <div style="width: 400px; margin: 50px 0 0 30px;">
      <span>Max: <b>{{ max1 }}</b> | Current: <b>{{ value1 }}</b></span>
      <mdc-slider min=0 :max=max1 step=10 display-markers v-model="value1" />
    </div>
    <div style="width: 400px; margin: 50px 0 0 30px;">
      <span>Max: <b>{{ max2 }}</b> | Current: <b>{{ value2 }}</b></span>
      <mdc-slider min=0 :max=max2 step=10 display-markers v-model="value2" />
    </div>
  </div>
</div>
Matt Oestreich
  • 8,219
  • 3
  • 16
  • 41
  • I appreciate the comment, Matt. I've tried your solution and have the same outcome. I know my data is there as I've console logged it. I'm curious as to why a resize seems to be the only option along with a soft refresh. – RogerFedFan Apr 14 '19 at 21:33
  • @RogerFedFan check out my updated answer, specifically the quote from their documentation... – Matt Oestreich Apr 14 '19 at 22:03
  • Currently it is being installed through yarn. I've seen your recent edit and I have seen that on the documentation as well however I'm having a hard time understanding how exactly to implement that. – RogerFedFan Apr 14 '19 at 22:38
  • Agreed. Their docs are confusing on how to implement that. [According to their source code](https://github.com/stasson/vue-mdc-adapter/blob/5b929b57f0abd7155627f7827a06dd19fcb66941/components/slider/mdc-slider.vue#L196) you should be able to add a prop like `` or `` and that may work. It looks like that library hasn't been updated in a while and is a bit outdated. Not sure how deep into it you are, but it may be worth switching to something like [Vuetify](https://vuetifyjs.com/en/components/sliders#slider) – Matt Oestreich Apr 14 '19 at 22:55
  • Yea our application is pretty set on using this implementation. I'm a junior dev so I still have some trouble understanding source code. is the ```layout-on``` an attribute or do I have to pass some code for it to work? – RogerFedFan Apr 14 '19 at 23:30
  • If you could provide a CodePen or JsFiddle reproducing the issue, it would be easier to help. I can't seem to reproduce it. – Matt Oestreich Apr 15 '19 at 00:37