jQuery UI Widgets Forums Plugins AngularJS jqx-slider: tooltipFormatFunction does not work

This topic contains 7 replies, has 5 voices, and was last updated by  samjones02 1 year, 10 months ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author

  • badera

    Dear jqWidgets Team

    I have problems using customized tooltips on jqxSlider Control. Why does the following not work?

    <!DOCTYPE html>
    <html ng-app="demoApp">
        <title id="Description">jqxSlider directive for AngularJS</title>
        <link rel="stylesheet" type="text/css" href="../../jqwidgets/styles/jqx.base.css" />
        <script type="text/javascript" src="../../scripts/angular.min.js"></script>
        <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxslider.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxangular.js"></script>
        <script type="text/javascript" src="../../scripts/demos.js"></script>
        <script type="text/javascript">
            var demoApp = angular.module("demoApp", ["jqwidgets"]);
            demoApp.controller("demoController", function ($scope) { 
                $scope.value = 200;
                $scope.sliderSettings = {
                    min: 100,
                    max: 500,
                    tooltip: true,
                    tooltipFormatFunction: function(value) {
                        console.log("this function is never called...");
                        return new Number(888).toPrecision(2);
        <div ng-controller="demoController">
            <br /><br />
            <jqx-slider ng-model="value" jqx-settings="sliderSettings"></jqx-slider>
            <br /><br />
            <div class="jqx-rc-all" style="background: lime;  height: 50px;" ng-style="{ width: value + 'px' }"></div>

    Thanks for your help in advance!
    – badera


    May I kindly re-ask, what is here the problem?


    I am still waiting for a response here. Is it possible to get one please?
    Thanks in advance!
    – badera

    Peter Stoev

    Hi badera,

    We will investigate for a future update why this angularjs code does not work as expected.

    Best Regards,
    Peter Stoev

    jQWidgets Team


    Hello, is this topic still on the radar? I am evaluating jQWidgets 4.4.0 for a project and this problem is still present. It affects tickLabelFormatFunction as well: the function is never called, as illustrated in the original poster’s example above.



    I’m encountering this in 4.1.1. It appears to be specific to the range slider.

    Walking the minified code, _showTooltip in jqxslider.js calls g.tooltipFormatFunction and stores the result.
    However, if g.toolTipCreated is true and g.rangeSlider is true, the result does not appear to ever be used.

    (Actually, I just realized this is a separate issue from the original Angular non-range report, will open a new item.)

    • This reply was modified 7 years, 5 months ago by  Gary.


    Gary write the right Answer


    Mage Monkeys provides the best Magento Ecommerce Store Development Service. Mage monkeys is a leading Magento development company. We are an ISO 9001:2008 certified company with 17+ years of expertise and experience in the IT industry. Hire Magento Developers

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.