noUiSlider | accessible JavaScript range slider | Animation library

I have a price slider, when I accessed the source codes, there were a maximum of 5 products, but I arranged it to be 10 in total. Now when I scroll it shows a certain number of meaningless values ​​and the content does not change

Step 1 : https://prnt.sc/qO-teP8WUPDW (No Problem) ... Step 4 : https://prnt.sc/QeP2dCz8pXCK (Problem) ... Step 7 : https://prnt.sc/lrK7-cByx0h7 (Problem)

Only in step 4 and 7 the content does not change and the package name changes meaninglessly. Below are the codes I used

I am working on project upgrade from Vue 2 to Vue 3. The code base changed according to Vue migration documents: https://v3.vuejs.org/guide/migration/introduction.html#overview. I have mismatch of above mentioned libraries. Does somebody has a running project and would share their working library versions

Current mismatch error is :

Trying to run this on docker, but I get EBADENGINE unsupported engine warning (and subsquent build fail, which I assume are related at least somewhat).

Docker command (from cloned project root with package.json file):

I have installed windows 11 in my newly bought laptop, and installed Nodejs, Angular Cli, but when I run npm install in my project everything is giving error, I tried a lot , but could not solve it.

upgrade downgrade node. update all node packages. clear cache etc.

Note:

I made

I have a noUiSlider with several handles to allow specifying several contiguous date periods (example = Feb to Apr, May to July, and Aug to Sept). Ideally I would like to have labels that appear centered on the connect divisions to describe what each period relates to (ex. "Current Period", "Next Period"). I was thinking I could do this by setting a centered background image on the noUi-connect divisions.

However, the noUi-connect divisions use transform (translate/scale) styling which results in my background images being scaled which I do not want.

I also thought maybe I could revise the javascript to generate an outer division around each nonUi-connect division, and I would apply the background onto the outer division instead - but I was unable to get the background from the outer division to appear.

Any other ways I could accomplish this? The only other thing I can think of it to have floating divisions defined outside of the noUiSlider object which I would need to reposition whenever I detect changes in the handle positions.

after update from angular 11.2.6 to angular 12.2.7 the binding to the nouislider component is not working anymore. Running ng serve prints this error:

The property and event halves of the two-way binding 'ngModel' are not bound to the same target.

Use the ng2-nouislider in a fresh installation it works fine.

app.module.ts

how to set the handle in middle without setting the start value 50.

currently I am making a scrollbar with this plugin. but problem is it's open with always start value .I don't want it. I want something like this , at first scroll start from 0 and the handle stay in the middle of the slider . how do I achieve it ?

here is my code

I've been attempting to utilise the api for the the javascript package datatables within r shiny. Whenever I run my code, I get an error saying that .DataTable() is not recognised. Below is what my code looks like in R: