Slider not displayed, please help

mrtornado commented 6 years ago

Hello guys,

I'm a newb meteor coder (just got started with it) and for me the slider is not working, I get no console error logs nothing at all just the input box is displayed and the text I've inserted in the code, can somebody please help me , I use the next code on a fresh installation of Meteor 1.7.0.5 and here http://jsfiddle.net/qv6yrjrv/2273/ the code is working So main.js file:

import { Template } from 'meteor/templating';
import { ReactiveVar } from 'meteor/reactive-var';

import './main.html';

var $range = $(".js-range-slider");

$range.ionRangeSlider({
    type: "single",
    min: 1,
    max: 100,
});

$range.on("change", function () {
    var $this = $(this),
        value = $this.prop("value");
    var num1  = "6.33";
    var num2  = 4;
    var num3    = 3;
    var num4    = 2;
    var price = (value * num1);
  if (value <= 1) {
            price = (value * num1);
  } else if (value <= 8) {
         price = (value * num2);
  } else if (value <= 20) {
         price = (value * num3);
  } else {
        price = (value * num4);
  }

    console.log("Value: " + "$" + price );
    })

and in main.html

<head>
  <title>ypp</title>
</head>

<body>
<div class="range-slider">
    <input type="text" class="js-range-slider" value="" />
</div>

  <p class="price">Text works but slider not </p> 

</body>

mrtornado commented 6 years ago

also tried it with $('input[type="rangeslide"]').ionRangeSlider()after domReady (client) on HTML elements

and import {ionRangeSlider} from 'meteor/postrednik:meteor-rangeslider';

still no luck just the input text boxed displayed.

mrtornado commented 6 years ago

Seems that warping it into a template worked so new code in main.js

import { Template } from 'meteor/templating';
import { ReactiveVar } from 'meteor/reactive-var';
import {ionRangeSlider} from 'meteor/postrednik:meteor-rangeslider';

import './main.html';

  Template.hello.rendered = function () {
var $range = $(".js-range-slider");

$range.ionRangeSlider({
    type: "single",
    min: 1,
    max: 100,
});

$range.on("change", function () {
    var $this = $(this),
        value = $this.prop("value");
    var num1  = "6.33";
    var num2  = 4;
    var num3    = 3;
    var num4    = 2;
    var price = (value * num1);
  if (value <= 1) {
            price = (value * num1);
  } else if (value <= 8) {
         price = (value * num2);
  } else if (value <= 20) {
         price = (value * num3);
  } else {
        price = (value * num4);
  }

    console.log("Value: " + "$" + price );
    })
 }

main.html

<head>
  <title>ypp</title>
</head>

<body>

{{> hello}}

</body>

<template name="hello">
<div class="range-slider">
<input type="text" class="js-range-slider" value="" />
</div>

  <p class="price">Text works but slider not </p> 
</template>

postrednik commented 6 years ago

Hi, I can't help as I'm not working with meteor for some time anymore :(

postrednik / meteor-rangeslider

Slider not displayed, please help #5