How to inject custom html into a specific class with vue

Question

I have a requirement like I want to inject some custom HTML content into an existing class slider-piecewise

the plugin maker is having a bug with the piecewise slot so I want to inject some HTML

I want to inject the below HTML into ul.slider-piecewise

<li><img src="http://placehold.it/60x60"/><p>Argentina</p></li>

new Vue({
  data() {
    return {
      value: [0,100]
    }
  },
  created() {
    this.min = 0
    this.max = 250
    this.enableCross = false
  },
  methods:{
     sliding(steps){
       console.log('steps',steps);
    }
  },
}).$mount('#app')

* {
  margin:0;
  padding:0;
  box-sizing:border-box;
}

:root{
   --slider-color:#2196f3;
}

.app-content {
  padding:40px 15px;
}

.slider{
    height:150px !important;
}

.slider-always{
  width: 5px !important;
  height: 100% !important;
  cursor: w-resize !important;
  left: 5px !important;
  background: #2196f3 !important;
  top:0 !important;
}

.slider-process{
    border-radius: 0 !important;
    background-color: #ffffff !important;
}

.slider-process:before,.slider-process:after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 5px;
    background: var(--slider-color);
}
.slider-process:before{top:0}
.slider-process:after{bottom:0}

.slider-dot{border-radius:0 !important; box-shadow:none !important;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link href="https://unpkg.com/[email protected]/dist/vue-range-slider.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/[email protected]/dist/vue-range-slider.min.js"></script>


<div id="app">
  <div class="app-content">
    <vue-range-slider v-model="value" :min="min" :max="max" :step="0.1" :enable-cross="enableCross" @slide-end="sliding($event)">
    
      <div class="diy-tooltip" slot="piecewise" >
          
         <li><img src="http://placehold.it/60x60"/><p>Argentina</p></li>
        <li><img src="http://placehold.it/60x60"/><p>Brazil</p></li>
        
      </div>
      
    </vue-range-slider>
  </div>
</div>

plugin link(used by me): https://github.com/xwpongithub/vue-range-slider

Side note: change step attribute to :step to make sure the 0.1 is sent as a number (Vue is throwing Invalid prop errors). — Philip
– Philip, Commented Sep 24, 2021 at 13:45
with @Philip solution i'm able to inject the like into the appropriate place now problem is li appending multiple times can be seen here ibb.co/kcX2rpC — EaBengaluru
– EaBengaluru, Commented Sep 26, 2021 at 7:28
It seems like the piecewise thing is supposed to make multiple items, like tick marks on a scale/graph, right? So I think it's the correct behaviour. Anyway that's another question that's better directed at the makers of the plugin themselves. — Philip
– Philip, Commented Sep 27, 2021 at 23:28

Philip · Accepted Answer · 2021-09-24 13:50:29Z

1

Add :piecewise="true" to the <vue-rang-slider> tag to enable it.

See property piecewise in documentation.

answered Sep 24, 2021 at 13:50

Philip

2,9982 gold badges27 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

EaBengaluru Over a year ago

it worked !!! but appending li multiple times see here ibb.co/kcX2rpC

Philip Over a year ago

I don’t know the plugin that well, so not sure if that’s normal behaviour.

Philip Over a year ago

Great that it works! Don’t forget to mark the question as answered.

Collectives™ on Stack Overflow

How to inject custom html into a specific class with vue

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related