How to use esp-idf get value range slider on web server?

[Thanyasit]

Can anyone direct me to a working example of a simple to use esp-idf get value range slider on web server?
Now I have a program for displaying web pages.
But I don't know how to extract values from JavaScript come out.

code create custom range sliders with CSS and JavaScript.
https://www.w3schools.com/howto/tryit.a ... angeslider

Code: Select all

static esp_err_t hello_get_handler(httpd_req_t *req)
{
    char*  buf;
    size_t buf_len;// Length buf

    /* Get header value string length and allocate memory for length + 1,
     * extra byte for null termination */
    buf_len = httpd_req_get_hdr_value_len(req, "Host") + 1;//return length
    if (buf_len > 1) {
        //ESP_LOGI(TAG, "Found header => : %d", buf_len);
        buf = malloc(buf_len);//จองหน่วยความจำ
        /* Copy null terminated value string into buffer */
        if (httpd_req_get_hdr_value_str(req, "Host", buf, buf_len) == ESP_OK) {
            ESP_LOGI(TAG, "Found header => Host: %s", buf);
        }
        free(buf);// คืนหน่วยความจำ
    }
    buf_len = httpd_req_get_url_query_len(req) + 1;
    if (buf_len > 1) {
        buf = malloc(buf_len);
        if (httpd_req_get_url_query_str(req, buf, buf_len) == ESP_OK) {
            ESP_LOGI(TAG, "Found URL query => %s", buf);
            char param[32];
            /* Get value of expected key from query string */
            if (httpd_query_key_value(buf, "pin", param, sizeof(param)) == ESP_OK) {
                ESP_LOGI(TAG, "Received query parameter => pin=%s", param);
                status = !status;
                ESP_LOGI(TAG, "New Status for the pin :%d , is = %d", PIN, status);
                //gpio_set_level(PIN, status);
           }
        }
        free(buf);
    }
    char* resp_str = "<div class=\"slidecontainer\"><input type=\"range\" min=\"1\" max=\"100\" value=\"50\" class=\"slider\" id=\"myRange\"></div>";
    httpd_resp_send(req, resp_str, strlen(resp_str)); //strlen return length
    /* After sending the HTTP response the old HTTP request
     * headers are lost. Check if HTTP request headers can be read now. */
    if (httpd_req_get_hdr_value_len(req, "Host") == 0) {
        ESP_LOGI(TAG, "Request headers lost");
    }
    return ESP_OK;
}
static const httpd_uri_t hello = {
    .uri       = "/",
    .method    = HTTP_GET,
    .handler   = hello_get_handler,
    /* Let's pass response string in user
     * context to demonstrate it's usage */
    .user_ctx  = "Hello World!"
};

Do I need to add anything yet?
Please guide me.